材质用户界面：使用onMouseLeave属性时，弹出窗口中断

Question

除了使用鼠标悬停道具以外，我在this page上重新制作了简单的popover示例：

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

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

一旦取消对onMouseLeave的注释，上述代码沙箱将自动静音。用户界面将正常显示，但不会显示弹出窗口。我发现实际项目中也会发生同样的情况。

注释onMouseLeave至少将允许onMouseEnter与弹出窗口一起正常使用，但随后会停留在屏幕上。

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

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

Answer 1

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

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

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

我找到了 fix here。