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

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

我会怎么做？ 我知道我需要使用状态或道具，但不知道如何做到这一点。这也是否与单向流动反应原理相矛盾? ? ？

组件代码:

<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>
)
121023 次浏览
小开
最佳答案

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

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

现在在子组件中:

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

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

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

下面是一个示例，说明如何将数据从子级传递到父级(我遇到过同样的问题，使用 come out)

在父函数上，我有一个函数(我将从子函数调用它，并为它提供一些数据)

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

简单步骤:

  1. 创建一个名为 Parent 的组件。
  2. 在 Parent Component 中创建一个接受一些数据和集合的方法 接受的数据作为父母的状态。
  3. 创建一个名为 Child 的组件。

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

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

  6. 该方法将用子元素的状态替换父元素的状态。
小开

在 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() {
[...]
}
};

SomFn 可能是您的 handleClick 方法。

小开

如果您的父组件是一个功能组件，那么您现在可以使用上下文方式。这涉及到将 ref 传递给对象，并将 ref 传递给 stateChange 方法。这将允许您在子级中更改状态从父级，并且在保持与父级状态同步的情况下引用该状态。你可以在 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);
}
小开

作为道具通过州立大学

我最近学到了一种方法，它可以很好地从 <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组件中的状态，利用“ 道具”。.这可以是你想要的任何东西。

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

小开

这正是我想要的效果。但是，如果一组数据有50条记录，其中(customer _ id，customer _ name)作为值要从子级更新到父级，那么这将滞后。在子组件中使用 React.useEffect 执行 setState


提交答案