Как передать состояние обратно родителям в React?

Question

У меня есть форма, на которой есть кнопка отправки. Эта форма вызывает функцию onclick, которая устанавливает состояние чего-то с false на true. Затем я хочу передать это состояние родительскому объекту, так что, если это правда, он отображает компонент A, но если он ложный, он отображает компонентB.

Как бы я мог это сделать? Я знаю, что мне нужно использовать состояние или реквизит, но не знаю, как это сделать. также это противоречит принципу одностороннего течения реакции?

код 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> 
    ) 

Answer 1

Move handleClick родителю и передать его компоненту ребенка в качестве опоры.

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

Теперь в компоненте ребенка:

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

Этот способ отправки формы будет обновлять состояние в родительском компоненте непосредственно. Это предполагает, что вам не нужно получать доступ к обновленному значению состояния в дочернем компоненте. Если вы это сделаете, вы можете передать значение состояния от родителя к ребенку в качестве опоры. Поддерживается односторонний поток данных.

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