javascript - 如何不将click事件传递给 react 中的 child ？

我使用material-ui。

在此代码中https://codesandbox.io/s/y4jwv4ry1


我有一个父组件SimplePopper，它呈现Toggle Button，并包装在Popper中。
div的根SimplePopper是可单击的（我无法在我编写的实际代码中将此点击事件传输到Botton coz，因此我不应该修改现有代码）
进入应用程序级别：

一个。我有一个切换按钮，如果单击它，则会显示日志“父按钮”。

b。如果将鼠标悬停在“切换”按钮上，则会显示Popper。
由于我的onClick已经位于parent SimplePopper的根目录上，因此如果我在Popper内的任何位置单击，它将触发父click事件。如何通过单击子项来防止触发父项中出现的任何事件？


请在此处查看代码https://codesandbox.io/s/y4jwv4ry1

最佳答案

您需要做两件事：

在SimplePopper组件中：

<div
     onClick={this.handleClickButton}
     ref={(node) => { this.parentNode = node }}> //added ref
            <PopperExample>
                <Button>Toggle</Button>
            </PopperExample>
</div>

并在handleClickButton中：

handleClickButton = e => {
    if (this.parentNode !== null && this.parentNode !== undefined) {
        this.parentNode.contains(e.target) && console.log('parent Button');
    }
};

如果this.parentNode包含正确的目标，则函数将被执行。

并在PopperExample中：

handleButtonPopperClick = e => {
    e.preventDefault();
    e.stopPropagation();
    this.setState(state => ({
        showDiv: true
    }));
};

Working demo