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

Question

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

我怎么做才能做出反应？我知道我需要使用状态或道具,但不知道该怎么做.这也是单向流反应原理的矛盾吗？

ComponentA代码:

<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

将 State 作为 Prop 传递

我最近学到了一种非常适合<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 ”。这可以是您想要的任何状态。

我希望这对您和其他开发人员将来有所帮助。

Answer 2

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

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

现在在子组件中:

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

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

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

Answer 3

在父组件中：

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

在子组件中：

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

Answer 4

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

另一种方法是创建回调方法。您可以在创建子级时将回调方法传递给该子级。

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

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

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

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

Answer 6

简单步骤：

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

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

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

6. 该方法将用孩子的状态替换父母的状态。