如何更改子組件的父組件的狀態？

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)} /> 
    ) 
    } 
}