如何不将点击事件传递给响应的孩子？答案

【问题标题】：How NOT to pass click event to the children in react?如何不将点击事件传递给响应的孩子？
【发布时间】：2019-02-25 17:21:44
【问题描述】：

我使用material-ui。

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

我有一个父组件 SimplePopper，它呈现 Toggle Button 并包裹在 Popper 中。
SimplePopper 的根 div 是可点击的（我无法将此点击事件转移到 Botton 因为在我正在编写的实际代码中我不应该修改现有代码）
进入应用层：

一个。我有一个切换按钮，如果我点击它，我会得到日志“父按钮”。

b.如果我将鼠标悬停在 Toggle 按钮上，我会得到 Popper。

如何防止通过点击子级触发父级中存在的任何事件？

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

【问题讨论】：

你不能只e.stopPropagation参加活动吗？
我做到了。不工作。您可以签入代码。
@AkhilaHegde 您是否期待像codesandbox.io/s/kkpn4kkwxv 这样的解决方案？
我期待：如果我点击 Popper（就此而言，在 Popper 内的任何地方），我不应该在 SimplePopper 上触发 handleClickButton。就我而言，如果我单击 Popper 内的任何位置，我会得到正确的日志吗？我应该避免这种情况。我检查了你的代码，它仍然没有帮助我。

标签： javascript reactjs material-ui dom-events

【解决方案1】：

你需要做两件事：

在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

【讨论】：

您为什么要检查preventDefault 和stopPropagation 是否存在于event 上？他们不是一直都在吗？