Reactjs onMouseOver и onMouseOut событие l oop в попытке Popover - PullRequest
Новая
       85

Reactjs onMouseOver и onMouseOut событие l oop в попытке Popover

1 голос
/ 21 марта 2020

Я пытаюсь создать элемент всплывающего окна React Material (https://material-ui.com/api/popover/), который будет отображаться при наведении курсора мыши на TableRow (https://material-ui.com/api/table-row/) и скрыто, когда пользователь наводит курсор мыши на TableRow.

Что я уже пробовал: 

const handlePopoverOpen = event => {
  setAnchorEl(event.currentTarget);
};


const handlePopoverClose = event => {
    setAnchorEl(null);
  };

const open = Boolean(anchorEl);

. , . 

<TableRow
   selected={props.selected === key ? true : false}
   hover={true}
   key={key} className={classes.tableBodyRow}
   onClick={() => props.onSelectChange(key, prop[0], prop[1])}
   onMouseOver={handlePopoverOpen}
   onMouseOut={handlePopoverClose}            
>

. , . 

<Popover
    id="mouse-over-popover"
    open={open}
    anchorEl={anchorEl}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
    onClose={handlePopoverClose}
  >
    I use Popover
  </Popover>

Всплывающее окно появляется, когда мышь наведена на TableRow, но затем продолжает мигать, как будто существует бесконечное число l oop для onMouseOver () и onMouseOut (). Я часами исследую эту проблему и не могу найти объяснение этой проблемы. Буду признателен, если кто-то может помочь!

Вот пример живой демонстрационной программы: https://codesandbox.io/s/heuristic-banach-071f3?fontsize=14&hidenavigation=1&theme=dark

1 Ответ

1 голос
/ 21 марта 2020

Вы проверяли раздел «Взаимодействие при наведении мыши» на https://material-ui.com/components/popover/?

Я не вижу остальной части вашего кода, поэтому сложно дать совет относительно точных изменений, которые вы нужно сделать, но ваше решение немного отличается от примера: 

<Typography
  aria-owns={open ? 'mouse-over-popover' : undefined}
  aria-haspopup="true"
  onMouseEnter={handlePopoverOpen}
  onMouseLeave={handlePopoverClose}
>
  Hover with a Popover.
</Typography>

ДОБАВЛЕНО:

После просмотра всего кода я внесу следующие изменения:

  1. Сделайте ваш tableData массив массивом объектов, а не массивом массивов 
const tableData = [{name: "Nick", age: 15}, {name: "George", age: 10}, {name: "John", age: 11}];
Измените свой код внутри tableBody, чтобы отразить это 
<TableBody>
  {tableData.map(data => {
    return (
      <TableRow
        key={data.name}
        hover={true}
        aria-haspopup="true"
        onMouseOver={handlePopoverOpen}
        onMouseOut={handlePopoverClose}
      >
        <TableCell>{data.name}</TableCell>
        <TableCell>{data.age}</TableCell>
      </TableRow>
    )
  })}
</TableBody>

ПРИМЕЧАНИЕ: key должно быть уникальным, поэтому повторяющихся имен не должно быть. Лучший вариант - добавить уникальный id к объекту и использовать его в качестве ключа. 

{id: 1, name: "Nick", age: 15}

Затем протестируйте всплывающее окно!

...