Event.stopPropogation似乎不适用于Material UI容器

时间:2019-05-13 18:36:47

标签: reactjs material-ui

我有一个包含此内容的页面。

<div>
  <Link key={row.id} onUpdateTask={this.props.onUpdateTask} to= {`/Supervisor/Task/${row.id}`}>
     <Paper className={classes.root} key={row.id}>
        <Grid container xs={12} className={classes.topContainer}>
           <Grid item xs={3}>
              <IconButton
                 className={classes.priorityIconButton}
                 aria-owns={anchorEl ? 'simple-menu' : undefined}
                 onClick={(e) => {this.handleClick(e, index)}}>   
               </IconButton>
            </Grid>
            <Grid item xs={9}>
              <Typography className={classes.activity} variant="body1">{row.name}</Typography>
            </Grid>
          </Grid>
        </Paper>
     </Link>
</div>

在单击该图标时,需要打开一个菜单。

handleClick = (event, index) => {
    event.stopPropagation();
    console.log("I came nereee")
    this.setState({ anchorEl: event.currentTarget, rowIndex: index });
  }

尽管内部有handleClick事件,但stopPropogation并没有被触发。该页面仅路由到编辑页面(单击时的父容器指向编辑页面)。我如何确保父容器仍可单击,但是单击菜单项后,它仍会执行其需要做的操作,而不执行其父操作?

1 个答案:

答案 0 :(得分:1)

您需要使用event.stopPropagation();来代替event.preventDefault();

我假设Link元素解析为具有a属性(即标准html链接)的href标签。如果是这样,event.stopPropagation()将无效。 stopPropagation()将阻止事件使DOM冒泡到其他事件侦听器,但是除非您执行{{1},否则事件的任何浏览器默认行为(例如打开链接)都将在事件传播结束时执行。 }。

这里有一些我描述的资源: