Material-ui:如何在嵌套组件中停止单击事件的传播

Question

我在Paper组件中有一个IconMenu组件。我想阻止单击事件在内部组件( IconMenu)上的传播。这就是我想出来的，但没有明显的结果(我还尝试用onTouchTap替换onClick，用同样的效果替换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事件处理程序中，这是不起作用的。

我找到了解决方案here

编辑：

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