如何在React中从子组件更新父状态

你可能需要在子组件的父组件状态下修改某些属性。尽管没有直接的方式可以添加引用, 就像你想要实现父子沟通一样, 你仍然可以间接实现。要实现子级与父级之间的通信, 你可以将Prop函数发送给子级组件。此功能应在组件中执行所需的任何操作, 例如更改某些属性的状态。
考虑以下父组件：

class Parent extends React.Component {constructor(props) {super(props)// Bind the this context to the handler functionthis.handler = this.handler.bind(this); // Set some statethis.state = {messageShown: false}; }// This method will be sent to the child componenthandler() {this.setState({messageShown: true}); }// Render the child component and set the action property with the handler as valuerender() {return < Child action={this.handler} /> }}

该父组件的状态具有messageShown属性, 出于某些原因, 我们希望从Child组件更改该属性。在父级中, 我们将渲染Child组件, 并将在父级中声明的处理函数作为属性(在本例中为action)发送。
在这种情况下, Child组件非常简单, 它将绘制一个按钮, 单击该按钮时将触发操作Prop(在父组件中发送)：

class Child extends React.Component {render() {return (< div> {/* The button will execute the handler function set by the parent component */}< Button onClick={this.props.action} /> < /div> )}}

这样, 你可以轻松地从子组件执行父函数。
【如何在React中从子组件更新父状态】编码愉快！