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

IT技术 javascript reactjs react-state-management
2021-03-10 18:23:14

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

我该怎么做才能做出react？我知道我需要使用 state 或 props 但不知道该怎么做。这也与单向流react原理相矛盾吗？？

组件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>
    )
6个回答

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

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

现在在子组件中：

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

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

<LoginPage  handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>
@RamiEnbashi 但这如何将decisionPage 的状态更改为true 从而在该组件内呈现渲染功能？
2021-04-22 18:23:14
@joe-clay 发布的链接非常好。保持父组件中条件渲染的逻辑与您已有的相同。通过移动handleClick到父组件，即使您是从子组件触发更改，您也正在更改该父组件的状态。thisinhandleClick指的是声明函数的组件，而不是调用它的组件。
2021-04-23 18:23:14
@RamiEnbashi 我有 console.logged 并且我可以看到状态更改为 true 但是你怎么告诉它，如果这是真的渲染上面的组件？
2021-04-25 18:23:14
很好的答案 :) 我还建议问题的提问者阅读官方文档中的Lifting State Up 和Thinking in React，以获取有关以这种方式做事背后的推理的更多信息。
2021-05-10 18:23:14
@RamiEnbashi 欢呼吧。现在用三元运算符让它工作，不确定是否需要但工作:)
2021-05-20 18:23:14

在父组件中：

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

在子组件中：

callBackMethod(){
   this.props.sendData(value);
 }
那么这个方法究竟是如何工作的呢？父级将方法“getDatafromChild”传递给子级，而“sendData”作为子级的处理程序，让子级再次将数据传递给父级？
2021-05-04 18:23:14

简单步骤：

  1. 创建一个名为 Parent 的组件。
  2. 在父组件中创建一个方法，该方法接受一些数据并将接受的数据设置为父组件的状态。
  3. 创建一个名为 Child 的组件。

  4. 将在 Parent 中创建的方法作为 传递给 child props。

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

  6. 该方法将用孩子的状态替换父母的状态。
@JérômeOudoul 我同意，我也注意到这种异步行为并且无法修复它。
2021-05-01 18:23:14
我真的很喜欢这个答案，但是您能否在第 5 步中提供更多详细信息？
2021-05-02 18:23:14
@Tricky 创建了此代码来演示这些步骤。希望这可以帮助。谢谢。codeandbox.io/s/flamboyant-sun-839f8
2021-05-09 18:23:14
@Aftab22 当您输入输入时，“来自孩子的数据”总是落后一步，因为 React 中的 setState() 是异步的stackoverflow.com/a/38558311/704387 不过我还没有能够解决这个问题。
2021-05-09 18:23:14

这是我们如何将数据从子级传递给父级的示例（我遇到了同样的问题并使用了这个）

在父级上，我有一个函数（我将从一个带有一些数据的孩子那里调用它）

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

将状态作为props传递

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

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

它是这样工作的：

STATE在<Parent />组件中设置默认值- 然后将“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 />组件中的状态将更改为您set在<Child />组件中的状态，使用“props”.. 这可以是您想要的任何内容。

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

这按预期工作得很好。几天以来我一直在寻找这个答案，今天终于奏效了。非常感谢分享知识。请您简要解释这在幕后如何实际工作，尽管它看起来很简单，但对初学者来说却令人生畏。
2021-04-26 18:23:14
其它你可能感兴趣的问题
上一篇在 Javascript 中检测图像 404 下一篇Puppeteer 等待所有图像加载然后截屏