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

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

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

Код компонента:

<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>
    )

Ответы

Ответ 1

Переместите handleClick в родительский элемент и передайте его дочернему компоненту в качестве опоры.

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

Теперь в дочернем компоненте:

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

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

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

Ответ 2

Вот пример того, как мы можем передавать данные от ребенка к родителю (у меня была та же проблема, и использование вышло с этим)

У родителя есть функция (которую я буду вызывать у ребенка с некоторыми данными для него)

handleEdit(event, id){ //Fuction
    event.preventDefault();  
    this.setState({ displayModal: true , responseMessage:'', resId:id, mode:'edit'});  
 } 

dishData = <DishListHtml list={products} onDelete={this.handleDelete} onEdit={(event, id) => this.handleEdit(event, id)}/>;

У дочернего компонента:

<div to="#editItemDetails" data-toggle="modal" onClick={(event)=>this.props.onEdit(event, listElement.id) }
                        className="btn btn-success">

Ответ 3

Простые шаги:

  1. Создайте компонент с именем Parent.
  2. В Parent Component создайте метод, который принимает некоторые данные и наборы  принятые данные в качестве родительского состояния.
  3. Создайте компонент с именем Child.

  4. Передайте метод, созданный в Parent, потомку как props.

  5. Примите реквизит в родительском, используя this.props, а затем метод  назовите и передайте ему дочернее состояние в качестве аргумента.

  6. Метод заменит родительское состояние дочерним.

Ответ 4

В React вы можете передавать данные от родителя к ребенку с помощью реквизита. Но вам нужен другой механизм для передачи данных от ребенка к родителю.

Другой способ сделать это - создать метод обратного вызова. Вы передаете метод обратного вызова дочернему элементу при его создании.

class Parent extends React.Component {
myCallback = (dataFromChild) => {
    //use dataFromChild
},
render() {
    return (
        <div>
             <ComponentA callbackFromParent={this.myCallback}/>
        </div>
    );
  }
}

Вы передаете значение solutionPage от дочернего элемента к родительскому элементу с помощью метода обратного вызова, который передал родительский элемент.

     class ComponentA extends React.Component{
          someFn = () => {
            this.props.callbackFromParent(decisionPage);
          },
          render() {
            [...]
          }
     };

SomeFn может быть вашим методом handleClick.