我有一個父組件,它有一個布爾狀態屬性「showModal」。當showModal爲true時,我渲染子組件「Modal」。這個Modal有一個關閉按鈕,它應該將「showModal」屬性切換回false。 「showModal」作爲道具傳遞給子Modal組件,但由於道具在React中是不可變的,我還沒有想出改變它的正確模式。如何更改子組件的父組件的狀態?
是否有某種雙向數據綁定可以使用?處理這個問題的最好方法是什麼?
我有一個父組件,它有一個布爾狀態屬性「showModal」。當showModal爲true時,我渲染子組件「Modal」。這個Modal有一個關閉按鈕,它應該將「showModal」屬性切換回false。 「showModal」作爲道具傳遞給子Modal組件,但由於道具在React中是不可變的,我還沒有想出改變它的正確模式。如何更改子組件的父組件的狀態?
是否有某種雙向數據綁定可以使用?處理這個問題的最好方法是什麼?
這裏是你如何能做到這一點。而這裏的工作示例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屬性。
您可以在父組件上創建一個方法來更新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)} />
)
}
}
您不需要Modal類上的updateParent方法。你可以使用this.props.toggleShowModalCallback。請參閱下面的答案。 – KumarM
這是我正在尋找的答案。謝謝! –