Material-ui:如何停止单击事件在嵌套组件中的传播 [英] Material-ui: How to stop propagation of click event in nested components

问题描述

我在 Paper 组件内有一个 IconMenu 组件.我想防止click事件在内部组件( IconMenu )上传播.这就是我想出的结果，但没有明显的结果(我也尝试用 onTouchTap ， onMouseUp 替代onClick并具有相同的效果): _iconMenuClick 方法是从来没有打电话.

I have an IconMenu component inside a Paper component. I would like to prevent the propagation of the click event on the inner component (the IconMenu). That's what I came up with, without significant results (I also tried substituting onClick with onTouchTap, onMouseUp with same effects): the _iconMenuClick method is never called.

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 事件处理程序中编写.

In addition to using event.stopPropagation(); It is useful to note that it should be written within a onClick event handler.

我在将其写入 onChange 事件处理程序中时犯了一个错误，但这没有用.

I made the mistake of writing it inside an onChange event handler, and that wasn't working.

我在此处

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

这篇关于Material-ui:如何停止单击事件在嵌套组件中的传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！