Material-ui：如何停止嵌套组件中click事件的传播

Question

我在IconMenu组件内部有一个Paper组件。我想防止click事件在内部组件（IconMenu）上传播。这就是我想出的结果，但是没有明显的效果（我也尝试用onClick替换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();
}

Answer 1

除了使用event.stopPropagation(); 需要注意的是，它应该写在一个onClick事件处理程序中。

我犯了在onChange事件处理程序中编写它的错误，但这是行不通的。

我在这里找到了解决方案

编辑：

<ListItem button onClick={this.handleListItemClick}>
-       <Checkbox onChange={this.handleCheckboxChange} />
+       <Checkbox onClick={this.handleCheckboxChange} />
      </ListItem>

Answer 2

用于停止顶级节点气泡事件:-) event.stopPropagation(); event.preventDefault();

Answer 3

我建议的解决方法如下：

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
    ...
}