Question

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

<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并没有被触发。该页面仅路由到编辑页面（单击时的父容器指向编辑页面）。我如何确保父容器仍可单击，但是单击菜单项后，它仍会执行其需要做的操作，而不执行其父操作？

Answer 1

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

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

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

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

1 个答案: