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

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

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

组件A代码：

<form onSubmit={this.handleClick}>


handleClick(event) {
    this.setState({ decisionPage: true });
    event.preventDefault();
  };

handleClick（事件）{
this.setState（{decisionPage:true}）；
event.preventDefault（）；
};

控制显示内容的父组件：

return (
      <div>
      {this.props.decisionPage ?
        <div>
          <LoginPage />
        </div>
        :
        <div>
          <Decision showThanks={this.props.showThanks}/>
        </div>
      }
      </div>
    )

返回(
{this.props.decisionPage？
:
}
)

将

handleClick

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

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

现在在子组件中：

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

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

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

---

下面是一个我们如何将数据从孩子传递给家长的示例（我也遇到了同样的问题，并使用了这个示例）

在parent上，我有一个函数（我将从一个子函数调用该函数，其中包含一些数据）

handleEdit（事件，id）{//Fuction
event.preventDefault（）；
this.setState（{displaymodel:true，responseMessage:''，resId:id，mode:'edit'}）；
} 
dishData=this.handleEdit（事件，id）}/>；

在子组件上：

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

this.props.onEdit（事件，liselement.id）}
className=“btn btn成功”>

简单步骤：

创建一个名为Parent的组件

在父组件中，创建一个接受某些数据和集合的方法 接受的数据作为父级的状态

创建一个名为Child的组件

将在父对象中创建的方法作为

props

传递给子对象

使用

this.props

后跟方法接受父级中的道具 命名并将子对象的状态作为参数传递给它

该方法将用子对象的状态替换父对象的状态

---

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

另一种方法是创建回调方法。创建回调方法时，将其传递给子对象

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

---

SomeFn可以是您的handleClick方法。

只是为了向我澄清一些事情，但为什么您要将其称为回调函数，通常回调函数是作为另一个函数的参数接收的函数（根据定义）我没有特别看到这里使用的myCallback函数是另一个函数的参数。

---

如果我错了，请纠正我

如果父组件是功能组件，现在可以使用使用上下文方式。这涉及将ref传递给对象，并将ref传递给stateChanging方法。这将允许您在保持与父状态同步的同时，更改子状态中parrent的状态，以及ref tht状态。您可以在youtubeVideo中通过在父组件中标题为“React 16.12 Tutorial 20:Intro to Context API”和“React 16.12 Tutorial 21:useContext”的代码了解更多信息：

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

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

---

将状态作为道具传递

我最近学习了一种方法，该方法非常适用于从

组件更改

组件中的状态

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

它的工作原理如下：

在

组件中设置默认的

状态

，然后将“setState”属性添加到

单击按钮时，

组件中的状态将更改为

使用“道具”将
组件中的状态设置为的任何状态。。这可以是你想要的任何东西

我希望这对您和其他开发人员将来有所帮助。
回答得好：）我还建议提问者阅读并从官方文档中获取更多有关以这种方式进行操作背后的原因的信息。@RamiEnbashi但是这如何将decisionPage的状态更改为true，从而呈现其中的呈现函数呢组件？@RamiEnbashi我有console.logged，我可以看到状态变为true，但你如何判断，如果这是真的，请渲染上述组件？@joe clay发布的链接非常棒。保持父组件中条件渲染的逻辑与现有逻辑相同。通过将
handleClick
移动到父组件，您正在更改父组件的状态，即使您正在从子组件触发更改<代码>这是
handleClick
中的
指的是声明函数的组件，而不是调用函数的组件。@Raminbashi为bud喝彩。现在可以使用三元运算符了，不确定是否需要，但可以使用：）我非常喜欢这个答案，但是你能在步骤5中给出更多细节吗？@Tricky创建了这段代码来演示这些步骤。希望这有帮助。谢谢@Aftab22当您键入输入时，“来自子对象的数据”总是落后一步，因为React中的setState（）是异步的，但我还不能修复它。@JérômeOudoul我同意，我也注意到了这种异步行为，无法修复它。
getDatafromChild(val){
    console.log(val);
}
render(){
 return(<Child sendData={this.getDatafromChild}/>);
}

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

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

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