防止材料 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

Answer 2

一种选择是在

onClick

内添加

my-dialog.js

处理程序。

const handleClick = e => {
    e.stopPropagation();
    // doesn't do anything except stop the event
  };

然后将其添加到您的

Dialog

：

     <Dialog
        disableBackdropClick
        open={open}
        onClose={handleClose}
        onClick={handleClick}
      >

进行更改的沙箱分叉：https://codesandbox.io/s/nostalgic-chaplygin-lql5m?fontsize=14&hidenavigation=1&theme=dark

Answer 3

与此无关

e.stopPropagation();

。对话框和编辑图标被行包裹，行具有点击功能。

我请你检查一下https://codesandbox.io/s/inspiring-bassi-b9hev

我做了一些改变。它将打开和关闭对话框。

在您现有的实现中，图标是对话框的一部分，这是错误的。你可以检查我的代码。

提示：

 <TableBody>
            <TableRow onClick={rowClick}>
              <TableCell>Content 1</TableCell>
              <TableCell>Row clicked {count} times</TableCell>
              <TableCell>
                <IconButton onClick={() => setIsOpen(true)}>
                  <EditIcon /> // I change it here
                </IconButton>
              </TableCell>
            </TableRow>
          </TableBody>
...

      <MyDialog isOpen={isOpen} onClose={() => setIsOpen(false)} />

新对话框

 <Dialog
      disableBackdropClick
      open={props.isOpen}
      onClose={() => props.onClose()}
    >
      <DialogTitle>Dialog</DialogTitle>
      <DialogContent>Some content</DialogContent>
      <DialogActions>
        <Button onClick={() => props.onClose()}>Cancel</Button>
        <Button onClick={() => props.onClose()}>Save</Button>
      </DialogActions>
    </Dialog>

Answer 4

您需要使用 stopPropagation 禁用操作列的行事件单击
这将解决问题

  const handlerActionColmunClick = (event: React.MouseEvent<HTMLElement>) => {
    event.stopPropagation();
  };


    <TableBodyCell onClick={handlerActionColmunClick }>
                      <IconButton
                        aria-label="three-dot-action-menu"
                        aria-controls="customized-menu"
                            aria-haspopup="true"
                            onClick={handleActionMenuClick}
                          >
       ...........
    ...........
 ...........

Answer 5

为了防止事件传播，请将“MyDialog”更改为“TableRow”同级或更高级别的节点，而不是子节点