材质 UI:使用 onMouseLeave 道具时弹出会中断

Question

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

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

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

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

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

我在这里没有正确使用鼠标离开吗？

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

Answer 1

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

解决方法是向弹出窗口添加一个样式，以禁止弹出窗口打开后立即触发的其他onMouseLeave()事件：

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

我在这里找到了修复程序。