ReactJS：子组件内部父级上的setState

前端Tom2020-03-13

在子组件的父项上执行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，这将呈现新添加的待办事项。

神乐2020/03/13 17:04:51

parentSetState={(obj) => { this.setState(obj) }}

达蒙梅2020/03/13 17:04:51

您可以在父组件中创建addTodo函数，将其绑定到该上下文，将其传递给子组件，然后从那里调用它。

// in Todos
addTodo: function(newTodo) {
    // add todo
}

然后，在Todos.render中，您将

<TodoForm addToDo={this.addTodo.bind(this)} />

在TodoForm中用

this.props.addToDo(newTodo);

番长樱梅2020/03/13 17:04:51

在您的父级中，您可以创建一个类似的函数addTodoItem，该函数将执行所需的setState，然后将该函数作为prop传递给子组件。

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: ""});
  },

  ...

});

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

在这里摆弄。

2020/03/13 17:04:51

这些基本上都是正确的，我只是想指出一些新的（官方的）官方反应文档，该文档基本上建议：

对于React应用程序中发生的任何数据更改，应该只有一个“事实来源”。通常，首先将状态添加到需要呈现的组件。然后，如果还需要其他组件，则可以将其提升到最接近的共同祖先。与其尝试在不同组件之间同步状态，不如依靠自上而下的数据流。

参见https://reactjs.org/docs/lifting-state-up.html。该页面还通过一个示例工作。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer