Question

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

Answer 1

我个人喜欢事件驱动的方法。使用一个小库（例如PubSubJS）或使用本机事件滚动自己来实现Pub / Sub模式很容易。

我在这里写了更多关于后者的内容： http://maketea.co.uk/2014/03/05/building-robust-web-apps-with-react-part-1.html#component-communication

Answer 2

只要您的表单输入都是（1）controlled inputs并且（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);

此处a JSFiddle to demonstrate：http://jsfiddle.net/BinaryMuse/2K5qX/

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

2 个答案: