React.js: handleSubmit or onClick not triggered when rendered on the server side

I am having a problem rendering everything on the server side and have a handleSubmit triggered. Here is the source code:

index.js:

module.exports = require('./app/server');

app/server/index.js:

'use strict';

var env = process.env.NODE_ENV || 'development';
var express = require('express');
var http = require('http');
var app = express();

app.set('state', {});


// Inject Config
require('../config/server')[env](app, express);

// Inject component rendering
require('node-jsx').install({extension: '.jsx'});
app.use(require('../../lib/renderReactComponent')(app));

// Start server
var server = http.createServer(app);
return server.listen(app.get('port'), function() {
  return console.log('Listening on port ' + app.get('port') + ', Env: ' + app.settings.env);
});

module.exports = app;

lib/renderReactComponent.js:

var ReactApp = require('../app');
var React = require('react');
var path = require('path');
var url = require('url');

module.exports = function(app) {
  return function(req, res, next) {
    try {
      var path = url.parse(req.url).pathname;
      res.send(React.renderComponentToStaticMarkup(ReactApp({path: path, state: app.get('state')})));
    } catch(err) {
      return next(err)
    }
  }
}

app/index.js:

var ReactApp = require('./components/app');
module.exports = ReactApp;

app/components/app.js:

/**
 * @jsx React.DOM
 */

var React = require('react');
var ReactRouter = require('react-router-component');

var App = React.createClass({

  propTypes: {state: React.PropTypes.object.isRequired},

  getInitialState: function() {
    return {items: [], text: ''};
  },

  handleSubmit: function () {
    console.log("handleSubmit triggered!");
    var $author         = this.refs.author.getDOMNode(),
        $text           = this.refs.text.getDOMNode(),
        author          = $author.value.trim(),
        text            = $text.value.trim();

    if(!author || !text) {
        return false;
    }

    if(this.props.onCommentSubmit) {
        this.props.onCommentSubmit({ author: author, text: text });
    }

    $author.value = '';
    $text.value = '';

    return false;
  },

  render: function() {
    return (
      <html>
            <form className="commentForm" onSubmit={this.handleSubmit}>
                <input type="text" ref="author" placeholder="Your name"/>
                <input type="text" ref="text" placeholder="Say Something ..."/>
                <input type="submit" value="Post"/>
            </form>
      </html>
    );
  }
});
module.exports = App;

This code does not give me an error, but the handleSubmit is not triggered. I think it's because it's not render by the server side. How can I trigger the form event handleSubmit while trying to render the page from the server side ?

The flow works like this:

  • client requests a page
  • server does a React.renderComponentToString and returns the html to the client
  • at this point the server stops doing anything
  • the page loads on the client, and React.renderComponent is run
  • React notices the markup with reactids
    • verifies the checksum
    • if it's all good, just adds event listeners and waits for something to happen
  • the user maybe submits the form, invoking your handleSubmit

In handleSubmit, if you'd like to send some data to the server you can do it with the normal AJAX/WebSockets/etc techniques.

Check out superagent for a good http client that works in the browser and node.