javascript - 在 React 中，onClick 为父对象的父对象设置状态？

Question

所以我是 React 的新手并且仍在学习，从父元素管理 onClick 很容易，但我不确定我如何才能将点击一个或多个步骤发送给父元素的父元素。在我的设置中，组件就像这样 Page > Header > Menu Button。 Header comp 控制菜单的打开和关闭，但为了我的动画目的，我需要在 Page parent 中设置一个状态，以便它可以将它传递给作为 Header sibling 的其他组件。单击菜单按钮时，我需要将其向上发送到页面链。有人可以解释这是如何实现的吗？我发现的大多数示例只是谈论直​​接父子 onClick 句柄，我已经在使用 Header 和 Menu Button 组件。

Answer 1

看下面的例子...

使用已通过 React 组件继承链向下传递的点击处理程序。

function MenuButton(props) {
    return <button onClick={props.onClick}>Do Something</button>
}

function Header(props) {
    return (
        <div>
        <MenuButton onClick={props.onClick} />
        </div>
    )
}

在最父组件中建立一个点击处理程序，并像这样作为 prop 传递给子组件......

class Page extends Component {
    constructor() {
        super();

        this.state = {
            someStateToCache: false
        };
        this.clickHandler = this.clickHandler.bind(this); //bind context to click handler
    }

    clickHandler() {
        this.setState({ someStateToCache: true });
    }

    render() {
        return (
            <div>
                <Header onClick={this.clickHandler} />
            </div>
        );
    }
}