0

为了了解 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;

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

完整的源代码在这里，虽然我还没有提交该handleSubmit()方法。

4

1 回答 1

3

您需要在客户端重新渲染您的组件。我认为您现在正在做的只是从服务器中获取您所获得的内容并将其与类似的东西一起倾倒

<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

如果您在已经具有此服务器渲染标记的节点上调用 React.render()，React 将保留它并仅附加事件处理程序，从而使您获得非常高效的首次加载体验。

于 2015-07-20T21:20:38.387 回答