我用material-ui.
在此代码https://codesandbox.io/s/y4jwv4ry1
我有一个SimplePopper渲染 Toggle 的父组件，Button它被包裹在一个Popper.
根div的SimplePopper可点击（我不能这个点击事件传递给Botton在我写我不应该修改现有代码的实际代码堂妹）
进入应用层面：
一种。我有一个切换按钮，如果我点击它，我会得到日志“父按钮”。
湾 如果我将鼠标悬停在“切换”按钮上，则会得到 Popper。
由于我的 onClick 已经在 parent 的根上SimplePopper，如果我在 Popper 内的任何地方单击，它将触发 parent click 事件。如何通过单击子项来防止触发父项中存在的任何事件？
你需要做两件事：
在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
}));
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句