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

Question

我使用material-ui 。

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

1. 我有一个父组件 SimplePopper它呈现 Toggle Button它被包裹在 Popper 内.

2. 根div的SimplePopper是可点击的(我无法将此点击事件传输到 Botton 因为在我正在编写的实际代码中我不应该修改现有代码)

3. 进入应用程序级别:

   a.我有一个切换按钮，如果单击它，我会收到日志“父按钮”。

   b.如果我将鼠标悬停在“切换”按钮上，我会看到 Popper。

4. 因为我的 onClick 已经在父级 SimplePopper 的根目录上，如果我单击 Popper 内的任意位置，它将触发父级单击事件。 如何防止通过单击子级来触发父级中存在的任何事件？

请查看此处的代码 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