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

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

考虑以下父组件：

class Parent extends React.Component {
    constructor(props) {
        super(props)

        // Bind the this context to the handler function
        this.handler = this.handler.bind(this);

        // Set some state
        this.state = {
            messageShown: false
        };
    }

    // This method will be sent to the child component
    handler() {
        this.setState({
            messageShown: true
        });
    }

    // Render the child component and set the action property with the handler as value
    render() {
        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>
        )
    }
}

这样, 你可以轻松地从子组件执行父函数。

编码愉快！