如何从子组件更改父组件的状态？

2 回答

• 2

  这里是's how you can do it. And here'的工作示例JSBin：https://jsbin.com/yixano/2/edit?html,js,output

  var ModalParent = React.createClass({
    getInitialState: function() {
      return {showModal: false};
    },
  
    toggleShowModal: function() {
      this.setState({showModal: !this.state.showModal});
    },
  
    render: function() {
      return (
        <div>
          <button type="button" onClick={this.toggleShowModal.bind(this)}>Toggle Show Modal</button>
          {this.state.showModal ? 
              <Modal onModalClose={this.toggleShowModal.bind(this)}/> : 
              <div></div>}
          <h4>State is: </h4>
          <pre>{JSON.stringify(this.state, null, 2)}</pre>
        </div>);
    }
  });
  
  var Modal = React.createClass({
    render: function(){
      return <div><button type="buton" onClick={this.props.onModalClose}>Close</button></div>
    }
  });
  
  ReactDOM.render(<ModalParent/>, document.getElementById("app"));
  

  这里的想法是将对ModalParent的函数的引用传递给Modal，以便可以根据子代中的操作更改父级中的状态 .

  正如你所看到的，这个孩子有一个名为“onModalClose”的道具，它需要一个函数引用，在单击关闭按钮时会调用它 . 在父级中，我们将相应的toggleShowModal绑定到此onModalClose属性 .

  回复于 2019-04-01T06:26:12+00:00
• 4

  您可以在父组件上创建一个更新showModal状态的方法，并将其作为回调传递给props上的子组件 . 在子组件上定义一个函数，该函数执行在props上传递的函数 . 在'x'上设置关闭模型的onClick侦听器，因此将调用子函数，执行父项上的函数 . 这应该更新父级的状态并导致两者重新渲染 .

  class MyParent extends Component {
    toggleShowModal(){
      this.setState({showModal: !this.state.showModal})
    }
  
    render(){
    return (
      <Modal toggleShowModalCallback={this.toggleShowModal.bind(this)} />
     )
    }
  

  }

  class Modal extends Component {
  
    updateParent(){
      this.props.toggleShowModalCallback()
    }
  
    render(){
      return(
      <CloseModalButton onClick={this.updateParent.bind(this)} />
      )
    }
  }
  

  回复于 2019-04-01T06:26:12+00:00