首页 文章

ReactJS：子组件内父级的setState

提问于
浏览 次
61

从子组件在父级上执行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>
      

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

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

我有一个todo项目数组，这些项目在父级's state. I want to access the parent'状态下维护，并从 TodoForm 的 handleClick 组件中添加一个新的待办事项 . 我的想法是在父级上执行一个setState，它将呈现新添加的待办事项 .

reactjs

5 回答

  • -1

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

    var Todos = React.createClass({

  ...

  addTodoItem: function(todoItem) {
    this.state.todos.push(todoItem);
    this.setState({todos: this.state.todos});
  },

  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.

    回复于
  • 57

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

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

    然后，在Todos.render中，你会这样做

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

    用TodoForm调用它

    this.props.addToDo(newTodo);
    回复于
  • 5

    这些都是基本正确的，我只是想我会指出新的（ish）官方反应文件基本上建议： -

    对于在React应用程序中发生变化的任何数据，应该有一个“真实来源” . 通常，首先将状态添加到需要渲染的组件中 . 然后，如果其他组件也需要它，您可以将它提升到最近的共同祖先 . 您应该依赖自上而下的数据流，而不是尝试在不同组件之间同步状态 .

    见https://reactjs.org/docs/lifting-state-up.html . 该页面也通过一个例子 .

    回复于
  • 2

    我发现以下工作和简单的解决方案将参数从子组件传递到父组件：

    //ChildExt component
class ChildExt extends React.Component {
    render() {
        var handleForUpdate =   this.props.handleForUpdate;
        return (<div><button onClick={() => handleForUpdate('someNewVar')}>Push me</button></div>
        )
    }
}

//Parent component
class ParentExt extends React.Component {   
    constructor(props) {
        super(props);
        var handleForUpdate = this.handleForUpdate.bind(this);
    }
    handleForUpdate(someArg){
            alert('We pass argument from Child to Parent: \n' + someArg);   
    }

    render() {
        var handleForUpdate =   this.handleForUpdate;    
        return (<div>
                    <ChildExt handleForUpdate = {handleForUpdate.bind(this)} /></div>)
    }
}

if(document.querySelector("#demo")){
    ReactDOM.render(
        <ParentExt />,
        document.querySelector("#demo")
    );
}

    Look at JSFIDDLE

    回复于
  • 5
    parentSetState={(obj) => { this.setState(obj) }}
    回复于

相关问题