Question

考虑React主页上的ToDo App示例。对于后代，这里是a fiddle，代码在这篇文章的末尾。

现在说我们决定用简单的功能升级这个应用程序：

每个待办事项不仅包含文字，还包含“完成”属性。您可以单击某个项目，它将切换“完成”状态，并可能在完成后添加删除线样式。
在最底部，会有一个文字显示“完成”的数量，例如“完成2件，剩下3件”

问题是项目的状态保持在TodoApp，而不是TodoList。因此，我们想在onClick={something}的render方法中向<li>元素添加TodoList。但我们希望TodoApp处理点击事件，然后更改项目的状态，并使所有内容重新呈现。如果我们想这样接近它，我们怎么能这样做呢？

我们还可以创建一个由TodoItem调用的TodoList组件，并将有状态推送到其中。这将允许点击由TodoItem处理，但现在我们需要一种方法来共享TodoItem s'状态，其中组件指示已完成的项目数仍然是待办事项。

简而言之，我想知道组件如何相互发送事件，因为我认为只要知道这将解决这两个问题。

React ToDo App

/** @jsx React.DOM */
var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});
React.renderComponent(<TodoApp />, document.body);

Answer 1

执行此操作的惯用方法是将回调传递给TodoList：

现场演示： http://jsbin.com/zeqizene/1/edit

我已将TodoList更改为：

var TodoList = React.createClass({
  handleDoneToggle: function(i) {
    this.props.onDoneToggle(i);
  },
  render: function() {
    var createItem = function(item, i) {
      return <li onClick={this.handleDoneToggle.bind(null, i)}>
        {item.text}
        {item.done && " (done)"}
      </li>;
    };
    return <ul>{this.props.items.map(createItem, this)}</ul>;
  }
});

单击某个项目时，TodoList将调用自己的onDoneToggle函数，因此TodoApp可以适当地修改状态。

另见Editing a rich data structure in React.js。

在组件之间发送事件

React ToDo App

1 个答案: