Reactjs onMouseOver 和 onMouseOut 事件循环在尝试 Popover答案

【问题标题】：Reactjs onMouseOver and onMouseOut event loop in a try for PopoverReactjs onMouseOver 和 onMouseOut 事件循环在尝试 Popover
【发布时间】：2020-07-02 14:33:00
【问题描述】：

我正在尝试创建一个 React Material Popover(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 上时会出现弹出框，但随后它会一直闪烁，就像 onMouseOver() 和 onMouseOut() 的无限循环一样。我一直在调查这个问题几个小时，我找不到这个问题的解释。如果有人可以提供帮助，我将不胜感激！

这是一个代码现场演示： https://codesandbox.io/s/heuristic-banach-071f3?fontsize=14&hidenavigation=1&theme=dark

【问题讨论】：

你能做一个在线演示吗？这可能有助于其他人快速解决您面临的问题！
好的！我会尝试演示一下。
这个问题现在直接在 React 中的 MouseEnter 和 MouseLeave 事件上发生在我身上，但它只是发生在我在 Firefox 上测试的 chrome 上并且问题没有发生它似乎在 MouseEnter 上有一个无限循环和鼠标离开事件。如果有人知道如何解决它，我将不胜感激。
@cristian.nieto.dev 我记得我从来没有找到解决方案，所以我决定改变设计。但正如我现在所看到的，上面沙箱中提供的链接有效。看看，可能是谷歌浏览器内部的问题

标签： reactjs material-ui popover onmouseover react-material

【解决方案1】：

您是否查看了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>

添加：

看到整个代码后，我会做出这些改变：

使您的 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}

然后测试弹出框！

【讨论】：

是的，这是我用来构建实现的模板。 onMouseEnter 和 onMouseLeave 产生相同的结果。 Popover 组件在无限循环中显示和消失。
好的，我需要查看更多代码来进行测试。你确实有AnchorEl 的状态，对吗？
我为 anchorEl 使用了一个 React 钩子： const [anchorEl, setAnchorEl] = useState(null);以及两个函数：handlePopoverOpen => (event) { setAnchorEl(event.target)}handlePopoverClose =>{setAnchorEl(null)}
我将等待演示，但请检查您是否使用 setAnchorEl(event.currentTarget) ，如您的示例所示。
看到演示后，我在答案中添加了一个部分：)