javascript - 怎么打开链接路由器。材质ui列表项，但不在列表项中的一个按钮上

Question

有一个包含一些 ListItem 组件（来自材料 ui）的组件，并且每个 ListItem 都有一个按钮。整个列表项应该是可点击的，并将应用程序路由到某个地方，除了那个按钮，onclick 应该执行一个动作。但是现在，当我单击删除按钮时，它会将应用程序路由到该路径。我希望能够删除该项目（我在父级中的删除方法实际上会打开一个对话框来确认，但我想这无关紧要）。我只是希望它在单击图标时忽略路线。我该如何处理这种情况？这是代码：

<ListItem
  component={Link}
  to={`item/${props.id}`}
  alignItems="flex-start"
>
  <ListItemAvatar>
    <Avatar />
  </ListItemAvatar>
  <ListItemText
    disableTypography={false}
    primary={props.b}
    secondary={props.c}
    className={classes.body}
  />
  <IconButton
    onClick={props.deleteItem}
    aria-label="delete"
    className={classes.button}
  >
    <DeleteIcon />
  </IconButton>
</ListItem>

标签： javascriptreactjsmaterial-uireact-router-dom

Answer 1

deleteItem 函数应该将事件作为参数。并调用 event.stopPropagation();

更新：

event.preventDefault();