如何在React中将状态传递回父级？
我有一个表单，它有一个提交按钮。该表单调用一个函数onclick，该函数将某物的状态从false设置为true。然后我想把这个状态传递回父级，这样如果为true，它将呈现componentA，如果为false，它将呈现componentB。
我会如何反应呢？我知道我需要使用状态或道具，但不知道如何使用。这是否与单向流反应原理相矛盾？？
组件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>
)
共有3个答案
简单步骤：
>
将父到子中创建的方法作为props传递。
使用后跟方法名的this.props接受父级中的props，并将子级的状态作为参数传递给它。
在父组件中：
getDatafromChild(val){
console.log(val);
}
render(){
return(<Child sendData={this.getDatafromChild}/>);
}
在子组件中：
callBackMethod(){
this.props.sendData(value);
}
将handleClick移动到父组件，并将其作为道具传递给子组件。
<LoginPage handleClick={this.handleClick.bind(this)}/>
现在在子组件中：
<form onSubmit={this.props.handleClick}>
这种提交表单的方式将直接更新父组件中的状态。这假设您不需要访问子组件中的更新状态值。如果这样做，则可以将状态值作为道具从父对象传递回子对象。保持单向数据流。
<LoginPage handleClick={this.handleClick.bind(this)} decisionPage={this.state.decisionPage}/>
-
问题内容： 我有一个带有提交按钮的表单。该表单调用一个onclick函数，该函数将某物的状态从false设置为true。然后，我想将此状态传递回父级，这样，如果为true，则呈现componentA；如果为false，则呈现componentB。 我会如何反应？我知道我需要使用状态或道具，但不确定如何使用它。这也与单向流动反应原理矛盾吗？ ComponentA代码： 控制其显示内容的父组件： 问题
-
问题内容： 我的结构如下所示： 组件3应该根据组件5的状态显示一些数据。由于道具是不可变的，我不能简单地将其状态保存在组件1中并转发它，对吗？是的，我已经阅读了有关redux的内容，但不想使用它。我希望有可能通过反应来解决。我错了吗？ 问题答案： 对于孩子与父母的通信，您应该传递一个将状态从父母设置为孩子的函数，如下所示 这样，孩子可以通过调用通过props传递的函数来更新父母的状态。 但是您将不
-
问题内容： 我是第一次使用React-router，但现在还不知道如何思考。这是我在嵌套路由中加载组件的方式。 入口点.js App.js 因此，我的App的子级是我发送的内容组件。我使用的是Flux，我的App.js具有状态并侦听更改，但是我不知道如何将该状态传递给this.props.children 。在使用react-router之前，我的App.js显式定义了所有子级，因此传递状态是自然
-
我试图找出如何通知另一个组件状态更改。假设我有3个组件——pp.jsx、Header.jsx和SidebarPush.jsx我只是想用onclicka切换一个类。 因此，标题。jsx文件将有2个按钮，点击时将切换状态为真或假。另外两个组件是应用程序。jsx和Header。jsx需要了解这些状态的变化，以便在这些状态发生变化时可以切换类。
-
我的Navbar组件有2个子组件。每个组件都有自己的状态。在其组成部分内工作正常的国家。如何更新这两个状态从假到真的同时，当两个功能onclick将被执行？ 主组件导航栏 列表菜单组件 汉堡包成分