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

Question

我有一个父组件，它有一个布尔状态属性“showModal”。当showModal为true时，我渲染子组件“Modal”。这个Modal有一个关闭按钮，它应该将“showModal”属性切换回false。 “showModal”作为道具传递给子Modal组件，但由于道具在React中是不可变的，我还没有想出改变它的正确模式。

是否有某种双向数据绑定可以使用？处理这个问题的最好方法是什么？

Answer 1

这里是你如何能做到这一点。而这里的工作示例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一个功能，以便在父状态可以基于儿童的行为改变。

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

Answer 2

您可以在父组件上创建一个方法来更新showModal的状态并将其作为回调传递给道具上的子组件。在子组件上定义一个执行在道具上传递的函数的函数。在关闭模型的'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)} /> 
    ) 
    } 
}