Наведите указатель мыши на значки поверх элемента с помощью onMouseOver в реагирующем конве

Question

У меня есть элемент <Group/>, содержащий прямоугольник и набор значков в верхней части группы, которые должны быть видны только в том случае, если пользователь перемещает курсор в пределах границ содержимого <Group/>. Вне зависимости от того, отображаются значки или нет, запускается обработчик событий onMouseOver и onMouseOut, прикрепленный к объекту <Group/>. Я использую useState крючок для сохранения состояния наведения и скрытия / отображения значков.

Отображение значков onMouseOver работает нормально. Но всякий раз, когда курсор мыши находится над значком, срабатывает onMouseOut событие <Group/>, что скрывает значки. При наведении курсора мыши на значок они отображаются / скрываются в быстрой последовательности (мигает).

Есть ли способ заставить <Group/> в , а не вызвать событие onMouseOut, если курсор все еще на самом деле в пределах своей области, но поверх значка (всплывающее событие?)?

Answer 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/>, если контекстное меню все еще отображается или находится в режиме наведения. над. Немного громоздко - но это работает.

Answer 2

Если ваши значки не являются интерактивными, и вам не нужно слушать события для них, вы можете просто установить listening = false.

В этом случае узел будет удален из графика попаданий и будет не срабатывает mouseenter.