Предотвратить распространение событий по щелчку строки и диалоговому окну в пользовательском интерфейсе материала - PullRequest
Новая
       15

Предотвратить распространение событий по щелчку строки и диалоговому окну в пользовательском интерфейсе материала

0 голосов
/ 27 февраля 2020

Я использую , и у меня есть таблица с кнопкой внутри. Кнопка открывает диалог, и мне нужно иметь возможность поддерживать щелчок по строке таблицы.
Проблема в том, что с порталами (в реакции) - события распространяются , поэтому щелкаем внутри диалогового окна ( который был открыт после нажатия на кнопку) - событие щелчка в строке таблицы будет запущено.

Это строка: 

<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-файл, который показывает проблему:
enter image description here

Я знаю, что могу установить «rowClick» для каждой ячейки (и оставить последнюю ячейку без нее), но это всего лишь пример, и я ищу более универсальное c решение.

Ответы [ 3 ]

1 голос
/ 27 февраля 2020

Один из вариантов - добавить обработчик 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

0 голосов
/ 27 февраля 2020

это не имеет ничего общего 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)} />

Новый DialogBox 

 <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>
0 голосов
/ 27 февраля 2020

Потребовалось некоторое время, чтобы найти правильное решение, но единственный способ предотвратить распространение события состоял в том, чтобы добавить функцию «щелчка» в самом диалоге: 

<>
  <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

...