如何不将点击事件传递给反应中的 children？

Question

我用material-ui。

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

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

一个。我有一个切换按钮，如果我点击它，我会得到日志 'parent Button'.

b。如果我将鼠标悬停在“切换”按钮上，我会看到 Popper。
因为我的 onClick 已经在 parentSimplePopper 的根上，如果我点击 Popper 内部的任何地方，它会触发 parent 点击事件。 如何通过单击 children 来防止触发 Parent 中存在的任何事件？

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

Answer 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

如何不将点击事件传递给反应中的 children？

How NOT to pass click event to the children in react?

javascript

dom-events

reactjs

material-ui