时间戳

首页 > 解决方案 > 材质 UI：使用 onMouseLeave 道具时弹出窗口中断

reactjs - 材质 UI：使用 onMouseLeave 道具时弹出窗口中断

问题描述

除了使用鼠标悬停道具外，我在此页面上重新制作了简单的弹出框示例：

https://codesandbox.io/s/eager-dewdney-yt3v-yt3vb

  <Button 
    variant="contained" 
    onMouseEnter={e => setAnchorEl(e.currentTarget)}
    // onMouseLeave={() => setAnchorEl(null)}
  >

只要取消注释 onMouseLeave，上面的代码沙箱就会静默中断。UI 将显示正常，但不会显示弹出框。我发现在我的实际项目中也会发生同样的情况。

评论 onMouseLeave 将至少允许 onMouseEnter 与弹出框正常工作，但它会卡在屏幕上。

我在这里没有正确使用 onMouseLeave 吗？

如果它被正确使用但似乎是与库相关的错误，那么可以使用基于鼠标的替代方法来代替上面的 onMouseLeave 吗？

标签： reactjsmaterial-ui

解决方案

我遇到了同样的问题，我不想使用Tooltip.

修复方法是向弹出窗口添加一个样式，以抑制在onMouseLeave()弹出窗口打开后立即触发的附加事件：

        <Popover
            style={{ pointerEvents: 'none' }}
        >
            {children}
        </Popover>

我在这里找到了修复。

推荐阅读