TA貢獻1811條經驗 獲得超4個贊
對于子父通信，您應該傳遞一個函數，將狀態從父級設置為子級，就像這樣
class Parent extends React.Component {
constructor(props) {
super(props)
this.handler = this.handler.bind(this)
}
handler(someValue) {
this.setState({
someVar: someValue })
}
render() {
return <Child handler = {this.handler} />
}}class Child extends React.Component {
render() {
return <Button onClick = {this.props.handler}/ >
}}這樣，孩子可以通過調用帶有props傳遞的函數來更新父級的狀態。
但是你必須重新考慮組件的結構，因為據我所知，組件5和3不相關。
一種可能的解決方案是將它們包裝在更高級別的組件中，該組件將包含組件1和3的狀態。該組件將通過props設置較低級別的狀態。
TA貢獻1111條經驗 獲得超0個贊
我發現以下工作解決方案將onClick函數參數從child傳遞給父組件：
傳遞方法的版本（）
//ChildB componentclass ChildB extends React.Component {
render() {
var handleToUpdate = this.props.handleToUpdate;
return (<div><button onClick={() => handleToUpdate('someVar')}>
Push me </button>
</div>)
}}//ParentA componentclass ParentA extends React.Component {
constructor(props) {
super(props);
var handleToUpdate = this.handleToUpdate.bind(this);
var arg1 = '';
}
handleToUpdate(someArg){
alert('We pass argument from Child to Parent: ' + someArg);
this.setState({arg1:someArg});
}
render() {
var handleToUpdate = this.handleToUpdate;
return (<div>
<ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>)
}}if(document.querySelector("#demo")){
ReactDOM.render(
<ParentA />,
document.querySelector("#demo")
);}傳遞箭頭功能的版本
//ChildB componentclass ChildB extends React.Component {
render() {
var handleToUpdate = this.props.handleToUpdate;
return (<div>
<button onClick={() => handleToUpdate('someVar')}>
Push me </button>
</div>)
}}//ParentA componentclass ParentA extends React.Component {
constructor(props) {
super(props);
}
handleToUpdate = (someArg) => {
alert('We pass argument from Child to Parent: ' + someArg);
}
render() {
return (<div>
<ChildB handleToUpdate = {this.handleToUpdate} /></div>)
}}if(document.querySelector("#demo")){
ReactDOM.render(
<ParentA />,
document.querySelector("#demo")
);}舉報