防止材质 ui 中的行单击和对话框的事件传播

Question

我正在使用material-ui并且我有一个里面有一个按钮的桌子。该按钮打开一个对话框，我需要能够支持点击表格行。
问题在于，对于门户（在反应中）-事件被传播，因此在对话框内单击（单击按钮后打开）- 表行上的单击事件将被触发。

这是行：

<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