1

我有一个<Group/>包含一个矩形和一组图标的元素，该元素只有在用户将光标移动到其<Group/>内容的边界内时才可见。图标是否显示由附加到对象onMouseOver的事件处理程序触发。我使用挂钩来保存悬停状态并隐藏/显示图标。onMouseOut<Group/>useState

显示图标onMouseOver工作正常。但是每当鼠标光标悬停在图标上时，就会触发 的onMouseOut事件<Group/>，从而隐藏图标。将鼠标移到图标上会快速显示/隐藏它们（闪烁）。

如果光标实际上仍在其区域内但在图标顶部（事件冒泡？），是否有办法强制<Group/>不触发事件？onMouseOut

4

2 回答 2

1

可以通过React.useRef()在元素更改时存储元素的悬停状态并使用延迟函数中的引用来决定要做什么来解决此问题。本质上是这样的：

设置状态、引用和更新引用：

...

    const [isGroupHover, setIsGroupHover] = useState(false);
    const [isContextMenuHover, setIsContextMenuHover] = useState(false);

    const isContextMenuHovereRef = useRef(isContextMenuHover);
    const isGroupHoverRef = useRef(isGroupHover);

    useEffect(() => {
      isContextMenuHovereRef.current = isContextMenuHover;
      isGroupHoverRef.current = isGroupHover;
    }, [isGroupHover, isContextMenuHover]);

...

拦截<Group/>'onMouseOut事件

...

    const onMouseOut = (e): void => {
      setTimeout(() => {
        if (!isContextMenuHovereRef.current) {
          setIsGroupHover(false);
        }
      }, 350);
    };

...

一个函数 ( setIsContextMenuHover()) 通过 prop 传递给上下文菜单组件。这样，上下文菜单可以将它自己的悬停状态传递到链上。

...

<ContextMenu setOnHover={setIsContextMenuHover} />

...

<Group/>本质上，如果上下文菜单仍然可见或悬停在上面，这可以防止更改的悬停状态。有点笨拙 - 但它有效。

于 2020-04-01T20:29:57.370 回答
0

如果你的图标不是交互式的并且你不需要为它们监听事件，你可以设置listening = false.

在这种情况下，一个节点将从命中图中删除并且不会触发mouseenter。

于 2020-04-01T21:26:30.057 回答