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

Posted 2023-02-22

【中文标题】Reactjs onMouseOver 和 onMouseOut 事件循环在尝试 Popover

【英文标题】：Reactjs onMouseOver and onMouseOut event loop in a try for 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 我记得我从来没有找到解决方案，所以我决定改变设计。但正如我现在所看到的，上面沙箱中提供的链接有效。看看，可能是谷歌浏览器内部的问题

【参考方案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) ，如您的示例所示。

看到演示后，我在答案中添加了一个部分：)