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

Binding events handlers for React template rendered on server side

本文关键字：绑定 事件处理 程序 React 服务器端      更新时间：2023-09-26

为了让我了解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事件，这似乎合乎逻辑。当页面加载时，我正在加载已编译的模板文件，那么我如何将其应用于页面加载呢?从文档中不清楚我是如何做到的。

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

您需要在客户端重新呈现组件。我认为你现在所做的就是把你从服务器得到的东西放到像

这样的东西里
<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将保留它并只附加事件处理程序，允许您具有非常高性能的首次加载经验。

相关文章：