Question

我使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css" rel="stylesheet"/> <div id="A"></div> <div id="B"></div>。

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

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

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

b。如果我将鼠标悬停在“切换”按钮上，则会得到Popper。
由于我已经有onClick位于父项Botton的根目录上，因此如果我在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

如何不将click事件传递给反应中的孩子？

1 个答案: