Question

我正在使用material-ui，并且我有一个带有按钮的表格。该按钮将打开一个对话框，我需要能够支持单击表行。
问题在于门户网站（在反应中）-the events are propagated，因此在对话框内部（单击按钮后打开）中单击，将触发表行中的click事件。

这是行：

<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

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

- name: start
  description: The start date for a thing
  schema:
    $ref: path/to/Date.yml

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

string <date>

这是一个有效的示例：
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}
                          >
       ...........
    ...........
 ...........

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

4 个答案: