如何在React.JS中的独立组件之间通信？

Question

我是React.JS的新手，试图理解以下内容。想象一下，我有两个部分：两个HTML文本输入；我要实现的目标如下：当用户更改第一个文本字段中的文本时-更改同时出现在第二个文本字段中；反之亦然-当用户更改了第二个文本字段中的文本时，更改也出现在第一个文本中。以反应方式做到这一点的正确方法是什么？onChange处理程序应写什么？

Answer 1

只要您的两个表单输入都是 (1)受控输入并且 (2) 具有value指向相同数据的属性，则对该数据的任何更改都会更新两个输入。

/** @jsx React.DOM */

var SyncEdit = React.createClass({
  getInitialState: function() {
    return { text: "" };
  },

  render: function() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.handleChange} />
        <input type="text" value={this.state.text} onChange={this.handleChange} />
      </div>
    );
  },

  handleChange: function(evt) {
    this.setState({text: evt.target.value});
  }
});

React.renderComponent(<SyncEdit />, document.body);

这是一个 JSFiddle 来演示：http://jsfiddle.net/BinaryMuse/2K5qX/