reactjs - 防止 Material ui 中的行单击和对话框的事件传播

Question

我正在使用 material-ui 并且我有一张 table ，里面有一个按钮。该按钮打开一个对话框，我需要能够支持点击表格行。
问题在于，对于 Portals(在 react 中)- the events are propagated ，因此在对话框内单击(单击按钮后打开)- 表格行上的单击事件将被触发。

这是行:

<TableRow onClick={rowClick}>
  <TableCell>Content 1</TableCell>
  <TableCell>Row clicked {count} times</TableCell>
  <TableCell>
    <MyDialog />
  </TableCell>
</TableRow>

这是对话框:

<>
  <IconButton onClick={handleClickOpen}>
    <EditIcon />
  </IconButton>
  <Dialog disableBackdropClick open={open} onClose={handleClose}>
    <DialogTitle>Dialog</DialogTitle>
    <DialogContent>Some content</DialogContent>
    <DialogActions>
      <Button onClick={handleClose}>Cancel</Button>
      <Button onClick={handleClose}>Save</Button>
    </DialogActions>
  </Dialog>
</>

这是一个工作示例:
https://codesandbox.io/s/dazzling-hofstadter-gzwll

这是显示问题的动画 gif:


我知道我可以在每个单元格上设置“rowClick”(并且让最后一个单元格没有它)但这只是一个例子，我正在寻找一个更通用的解决方案。

Answer 1

找到合适的解决方案花了一些时间，但防止事件传播的唯一方法是在对话框本身上添加“单击”功能:

<>
  <IconButton onClick={handleClickOpen}>
    <EditIcon />
  </IconButton>
  <Dialog
    disableBackdropClick
    open={open}
    onClose={handleClose}
    onClick={handleDialogClick}
  >
    <DialogTitle>Dialog</DialogTitle>
    <DialogContent>Some content</DialogContent>
    <DialogActions>
      <Button onClick={handleClose} color="primary">
        Cancel
      </Button>
      <Button onClick={handleClose} color="primary">
        Save
      </Button>
    </DialogActions>
  </Dialog>
</>

并让 handleClickDialog 函数停止事件传播:

const handleDialogClick = e => {
  e.stopPropagation();
}; 

这是一个工作示例:
https://codesandbox.io/s/cocky-violet-19uvd