ReactJS:在子组件内的父级上设置状态 [英] ReactJS: setState on parent inside child component

问题描述

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

var Todos = React.createClass({getInitialState: 函数() {返回 {待办事项: [我做完"，我还没有完成"]}},渲染:函数(){var todos = this.state.todos.map(function(todo) {返回 <div>{todo}</div>;});返回 
<h3>待办事项</h3>{待办事项}<TodoForm/>
;}});var TodoForm = React.createClass({getInitialState: 函数() {返回 {待办事项输入:"}},handleOnChange:函数(e){e.preventDefault();this.setState({todoInput: e.target.value});},句柄点击:函数(e){e.preventDefault();//添加新的待办事项},渲染:函数(){返回 
<br/><input type="text" value={this.state.todoInput} onChange={this.handleOnChange}/><button onClick={this.handleClick}>添加待办事项</button>
;}});React.render(, document.body)

我有一组在父状态中维护的待办事项.我想从 TodoForm 的 handleClick 组件访问父级的状态并添加一个新的待办事项.我的想法是在父级上做一个 setState，它会渲染新添加的 todo 项.

解决方案

在你的父级中，你可以创建一个像 addTodoItem 这样的函数，它将执行所需的 setState，然后将该函数作为道具传递给子组件.

var Todos = React.createClass({...addTodoItem:函数(todoItem){this.setState(({ todos }) => ({ todos: { ...todos, todoItem } }));},渲染:函数(){...返回 
<h3>待办事项</h3>{待办事项}<TodoForm addTodoItem={this.addTodoItem}/>
}});var TodoForm = React.createClass({句柄点击:函数(e){e.preventDefault();this.props.addTodoItem(this.state.todoInput);this.setState({todoInput: ""});},...});

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

在这里摆弄.

What is the recommended pattern for doing a setState on a parent from a child component.

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)

I have an array of todo items which is maintained in the parent's state. I want to access the parent's state and add a new todo item, from the TodoForm's handleClick component. My idea is to do a setState on the parent, which will render the newly added todo item.

解决方案

In your parent, you can create a function like addTodoItem which will do the required setState and then pass that function as props to the child component.

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

  ...

});

You can invoke addTodoItem in TodoForm's handleClick. This will do a setState on the parent which will render the newly added todo item. Hope you get the idea.

Fiddle here.

这篇关于ReactJS:在子组件内的父级上设置状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！