我有一个包含此内容的页面。
<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
并没有被触发。该页面仅路由到编辑页面(单击时的父容器指向编辑页面)。我如何确保父容器仍可单击,但是单击菜单项后,它仍会执行其需要做的操作,而不执行其父操作?
答案 0 :(得分:1)
您需要使用event.stopPropagation();
来代替event.preventDefault();
。
我假设Link
元素解析为具有a
属性(即标准html链接)的href
标签。如果是这样,event.stopPropagation()
将无效。 stopPropagation()
将阻止事件使DOM冒泡到其他事件侦听器,但是除非您执行{{1},否则事件的任何浏览器默认行为(例如打开链接)都将在事件传播结束时执行。 }。
这里有一些我描述的资源: