我在一个IconMenu组件中有一个Paper组件。我想防止点击事件在内部组件（IconMenu）上传播。这就是我想出的，没有显着结果（我也尝试用 代替 onClick onTouchTap，onMouseUp具有相同的效果）：该_iconMenuClick方法从未被调用。
render() {
return (
<Paper onClick={this._onClick}>
<IconMenu iconButtonElement={iconButtonElement} onClick={this._iconMenuClick}>
{menuItems}
</IconMenu>
</Paper>
);
}
_iconMenuClick(event) {
MenuItem.onClick(event);
event.stopPropagation();
}
除了使用event.stopPropagation();
需要注意的是，它应该写在一个onClick事件处理程序中。
我犯了在onChange事件处理程序中编写它的错误，但这是行不通的。
我在这里找到了解决方案
编辑：
<ListItem button onClick={this.handleListItemClick}>
- <Checkbox onChange={this.handleCheckboxChange} />
+ <Checkbox onClick={this.handleCheckboxChange} />
</ListItem>
用于停止顶级节点气泡事件:-)
event.stopPropagation();
event.preventDefault();
我建议的解决方法如下：
render() {
return (
<Paper onClick={this._onClick}>
<IconMenu iconButtonElement={iconButtonElement}>
{menuItems}
</IconMenu>
...
</Paper>
);
}
_onClick(event){
if(event.target.innerText==""){ //Or any condition that distinguish the IconMenu from the Paper element
event.stopPropagation();
return 0;
}
//continue with normal behaviour
...
}