如何在React中将状态传递回父级？

Question

我有一个表单，它有一个提交按钮。该表单调用一个函数onclick，该函数将某物的状态从false设置为true。然后我想把这个状态传递回父级，这样如果为true，它将呈现componentA，如果为false，它将呈现componentB。

我会如何反应呢？我知道我需要使用状态或道具，但不知道如何使用。这是否与单向流反应原理相矛盾？？

组件A代码：

<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

简单步骤：

>

创建一个名为父的组件。

在父组件中创建一个方法，该方法接受一些数据，并将接受的数据设置为父组件的状态。

创建一个名为孩子的组件。

将父到子中创建的方法作为props传递。

使用后跟方法名的this.props接受父级中的props，并将子级的状态作为参数传递给它。

Answer 2

在父组件中：

getDatafromChild(val){
    console.log(val);
}
render(){
 return(<Child sendData={this.getDatafromChild}/>);
}

在子组件中：

callBackMethod(){
   this.props.sendData(value);
 }

Answer 3

将handleClick移动到父组件，并将其作为道具传递给子组件。

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

现在在子组件中：

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

这种提交表单的方式将直接更新父组件中的状态。这假设您不需要访问子组件中的更新状态值。如果这样做，则可以将状态值作为道具从父对象传递回子对象。保持单向数据流。

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