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

Question

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

我会怎么做呢？我知道我需要使用 state 或 props 但不知道该怎么做。这也与单向流反应原则相矛盾吗？

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

原文由 The worm 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

现在在子组件中：

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

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

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

原文由 Rami Enbashi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将状态作为道具传递

我最近学习了一种方法，该方法非常适合从 <Child /> 组件更改 <Parent /> 组件中的状态。

这可能不是这个问题的确切答案，但肯定适用于这种情况和其他类似情况。

它是这样工作的：

在 <Parent /> 组件中设置默认值 STATE 然后将“setState”属性添加到 <Child />

 const Parent = () => {
  const [value, setValue] = useState(" Default Value ");
   return (
    <Child setValue={setValue} />
  )
}

然后从 Child 组件更改状态（在父级中）

 const Child = props => {
  return (
   <button onClick={() => props.setValue(" My NEW Value ")}>
    Click to change the state
  </button>
 )
}

当您单击按钮时， <Parent /> 组件中的状态将更改为您使用“ 道具”组件中的 <Child /> set 中的状态， .. 这可以是任何你想要的。

我希望这对你和未来的其他开发者有帮助。

原文由 Michiel J Otto 发布，翻译遵循 CC BY-SA 4.0 许可协议