Question

所以我是React的新手并且还在学习，从父元素管理onClick很容易，但我不知道如何将一个或多个步骤发送给父母的父母。在我的设置中，组件就像这个页面＆gt;标题＆gt;菜单按钮。 Header comp控制菜单的打开和关闭但是为了我的动画目的，我需要在Page parent中设置一个状态，这样它就可以将它传递给Header的兄弟姐妹的其他组件。单击“菜单”按钮时，我需要将链路一直发送到“页面”。有人可以解释一下这是如何实现的吗？我发现的大多数例子都只是谈论了一个直接的父子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>
        );
    }
}

onClick在React中设置父级父级的状态？

1 个答案: