为在服务器端呈现的 React 模板绑定事件处理程序

Question

为了解决问题 React.js，我正在开发一个简单的布告栏应用程序，它可以在客户端和服务器端呈现视图。不幸的是，我遇到了障碍。

文件 components/index.jsx 当前看起来像这样：

var React = require('react');

var Notice = React.createClass({
  render: function () {
    return (
        <div className="noticeitem">
          {this.props.text}
        </div>
    );
  }
});

var NoticeForm = React.createClass({
  handleSubmit: function (event) {
    event.preventDefault();
    console.log('Running');
  },
  render: function () {
    return (
      <form className="noticeForm" onSubmit={this.handleSubmit}>
        <div className="form-group">
          <textarea className="form-control" placeholder="Your notice..." ref="text" />
        </div>
        <input type="submit" className="btn btn-primary" value="Post" />
      </form>
    );
  }
});

var Index = React.createClass({
  render: function () {
    var noticeNodes = this.props.notices.map(function (notice, index) {
      return (
          <Notice key={index} text={notice.text}>
          </Notice>
      );
    });
    return (
        <div>
          <h1>Noticeboard</h1>
          <NoticeForm />
          <div className="noticeList">
            {noticeNodes}
          </div>
        </div>
    );
  }
});

module.exports = Index;

它在服务器端呈现良好，但我注意到 NoticeForm 的 handleSubmit() 方法没有绑定到 onSubmit 事件，这似乎是合乎逻辑的。我在页面加载时加载已编译的模板文件，那么如何在页面加载时应用它呢？从文档中不清楚我是如何这样做的。

完整的源代码是here，虽然我还没有提交handleSubmit()方法

Answer 1

您需要在客户端重新呈现您的组件。我想你现在正在做的只是把你从服务器上得到的东西转储到

之类的东西里

<div id='view' dangerouslySetInnerHTML={{__html: this.props.body}} />

要让事件处理程序实际绑定，您应该做类似的事情

var container = document.getElementById('view');
var component = YOURCOMPONENT HERE
React.renderComponent(component, container);

查看 API 文档，这实际上不会卸载所有 domnode 并重绘。它应该只附加所有必要的事件处理程序

https://facebook.github.io/react/docs/top-level-api.html

If you call React.render() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

为在服务器端呈现的 React 模板绑定事件处理程序

Binding events handlers for React template rendered on server side

javascript

reactjs

isomorphic-javascript