如何將狀態傳遞迴React中的父級？

我有一個提交按鈕的表單。該窗體調用一個函數onclick，將事件的狀態從false設置爲true。然後我想把這個狀態傳遞給父類，這樣如果它是真的，它將呈現componentA，但是如果它是false，則呈現componentB。如何將狀態傳遞迴React中的父級？

我該怎麼做呢？我知道我需要使用狀態或道具，但不知道如何去做。這是否與單向流反應原理相矛盾？

ComponentA代碼：

<form onSubmit={this.handleClick}> 


handleClick(event) { 
    this.setState({ decisionPage: true }); 
    event.preventDefault(); 
    };

父組件，控制它顯示：

return (
     <div> 
     {this.props.decisionPage ? 
     <div> 
      <LoginPage /> 
     </div> 
     : 
     <div> 
      <Decision showThanks={this.props.showThanks}/> 
     </div> 
     } 
     </div> 
    )

來源

2016-11-21 The worm

移動父並把它傳遞到子組件的道具。

<LoginPage handleClick={this.handleClick.bind(this)}/>

現在在子組件：

<form onSubmit={this.props.handleClick}>

這種方式提交表單將直接更新父組件的狀態。這假定您不需要訪問子組件中的更新狀態值。如果你這樣做，那麼你可以將狀態值從父母傳遞給孩子作爲道具。單向數據流被維護。

<LoginPage handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>

來源

2016-11-21 14:26:06

你錯過了一個支架在此之後;） –

謝謝，@LeonardLepadatu –

好答案:)我也建議問題的提問者讀取[提升狀態上]（https://facebook.github.io /react/docs/lifting-state-up.html）和[反思思考]（https://facebook.github.io/react/docs/thinking-in-react.html）官方文檔獲取更多信息這種做法背後的推理。 –

如何將狀態傳遞迴React中的父級？

回答

相關問題