如何在 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>
    )

Answer 1

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

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

现在在子组件中：

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

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

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

Answer 2

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

在 parent，我有一个函数（我将从 child 调用它并为其提供一些数据）

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)}/>;

在 child 组件：

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

Answer 3

简单步骤：

创建一个名为 Parent 的组件。
在Parent组件中创建一个接受一些数据和集合的方法接受的数据作为 parent 的状态。
创建一个名为 Child 的组件。
将Parent中创建的方法作为props传递给child。
接受 parent 中的道具使用 this.props 然后是方法命名并将 child 的状态作为参数传递给它。
该方法会将 parent 的状态替换为 child 的状态。

Answer 4

在 React 中，您可以使用道具将数据从父级传递给子级。但是您需要一种不同的机制来将数据从子级传递到父级。

另一种方法是创建回调方法。您在创建子项时将回调方法传递给它。

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

您通过父级传递的回调方法将 decisionPage 值从子级传递给父级。

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

SomeFn 可能是您的 handleClick 方法。

Answer 5

如果您的 parent 组件是功能组件，您现在可以使用 use context 方式。这涉及将 ref 传递给 object 并将 ref 传递给 stateChanging 方法。这将允许您做的是从 child 中的 parrent 更改状态，并在保持与 Parent 状态同步的同时引用该状态。您可以在标题为 'React 16.12 Tutorial 20: Intro to Context API' 和 'React 16.12 Tutorial 21: useContext'

的 codedamn 的 youtube 视频中了解更多相关信息

Answer 6

在父组件中：

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

在子组件中：

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

Answer 7

将状态作为 Prop 传递

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

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

它是这样工作的：

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

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

然后从 Child 组件

更改状态（在 Parent 中）

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

当您单击该按钮时，<Parent /> 组件中的状态将更改为您 set 在 <Child /> 组件中的任何状态，利用“props"..这可以是你想要的任何东西。

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

Answer 8

这正是我想要的。但是如果数据集有 50 条记录（customer_id，customer_name）作为要从子项更新到父项的值，那么这会滞后。在子组件

中使用 React.useEffect 执行 setState

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

How to pass state back to parent in React?

javascript

reactjs

react-state-management