ReactJS:在子组件内的父组件上设置状态

Question

从子组件对父组件执行 setState 的推荐模式是什么。

var Todos = React.createClass({
  getInitialState: function() {
    return {
      todos: [
        "I am done",
        "I am not done"
      ]
    }
  },

  render: function() {
    var todos = this.state.todos.map(function(todo) {
      return <div>{todo}</div>;
    });

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm />
    </div>;
  }
});

var TodoForm = React.createClass({
  getInitialState: function() {
    return {
      todoInput: ""
    }
  },

  handleOnChange: function(e) {
    e.preventDefault();
    this.setState({todoInput: e.target.value});
  },

  handleClick: function(e) {
    e.preventDefault();
    //add the new todo item
  },

  render: function() {
    return <div>
      <br />
      <input type="text" value={this.state.todoInput} onChange={this.handleOnChange} />
      <button onClick={this.handleClick}>Add Todo</button>
    </div>;
  }
});

React.render(<Todos />, document.body)

我有一个待办事项数组，它维护在父级的状态中。我想从 TodoForm 的 handleClick 组件访问父项的状态并添加一个新的待办事项。我的想法是在父级上执行 setState，这将呈现新添加的待办事项。

Answer 1

在父组件中，您可以创建一个像 addTodoItem 这样的函数，它将执行所需的 setState 操作，然后将该函数作为 props 传递给子组件。

var Todos = React.createClass({

  ...

  addTodoItem: function(todoItem) {
    this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));
  },

  render: function() {

    ...

    return <div>
      <h3>Todo(s)</h3>
      {todos}
      <TodoForm addTodoItem={this.addTodoItem} />
    </div>
  }
});

var TodoForm = React.createClass({
  handleClick: function(e) {
    e.preventDefault();
    this.props.addTodoItem(this.state.todoInput);
    this.setState({todoInput: ""});
  },

  ...

});

您可以在TodoForm的handleClick中调用addTodoItem。这将在父级上执行 setState，从而呈现新添加的待办事项。希望你能明白。

Fiddle here.