Question

为了了解React.js，我正在研究一个简单的noticeboard应用程序，它在客户端和服务器端呈现视图。不幸的是，我遇到了麻烦。

文件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;

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

完整的源代码是here，但我还没有提交onSubmit方法。

Answer 1

您需要在客户端重新渲染组件。我认为你现在正在做的就是把你从服务器上得到的东西拿出来并用类似

的东西

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

要使事件处理程序实际绑定，您应该执行类似

的操作

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

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

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

如果在已有此节点的节点上调用React.render（）服务器呈现的标记，React将保留它并仅附加事件处理程序，允许您具有非常高性能的首次加载经验。

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

1 个答案: