Reactで状態を親に戻す方法は？

Question

私は送信ボタンがあるフォームを持っています。 そのフォームは、何かの状態をfalseからtrueに設定する関数onclickを呼び出します。 それから、この状態を親に戻して、trueの場合はcomponentAをレンダリングしますが、falseの場合はcomponentBをレンダリングします。

私はどのように反応するでしょうか？ 私は州や小道具を使用する必要があるが、それを行う方法がわからないことは知っています。また、これは一方向の流れの原則と矛盾していますか？

ComponentAコード：それは表示内容を制御

<form onSubmit={this.handleClick}> 


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

親コンポーネント：

Answer 1

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

親に移動​​と小道具などの子コンポーネントに渡します。子コンポーネントで今

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

：

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

この方法でフォームを送信することは、直接親コンポーネントの状態を更新します。これは、子コンポーネントの更新された状態値にアクセスする必要がないことを前提としています。そうした場合、状態値を親から子に継承することができます。一方向データフローは維持されます。

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