问材质UI:使用onMouseLeave属性时的弹出式中断
EN

Stack Overflow用户

提问于 2019-09-15 22:32:38

回答 1查看 283关注 0票数 0

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

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

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

注释onMouseLeave将至少允许onMouseEnter正确地处理弹出窗口，但它会被卡住在屏幕上。

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

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

发布于 2021-03-14 01:00:02

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

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

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

我找到fix here了。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57945105

复制

相似问题

问材质UI:使用onMouseLeave属性时的弹出式中断EN