Как сделать тайм-аут, а затем очистить тайм-аут в реагирующем функциональном компоненте? - PullRequest
Новая
       16

Как сделать тайм-аут, а затем очистить тайм-аут в реагирующем функциональном компоненте?

1 голос
/ 14 июня 2019

Привет,

У меня есть функциональный компонент вactjs, и я пытаюсь сделать тайм-аут при наведении курсора мыши на меню, что нормально и хорошо работает, но я не знаю, как очистить этот тайм-аут в другой функции в этом же функциональном компоненте, есть ли какое-то решение для этого? Я в основном использую крючки. Я нашел некоторые тайм-ауты, но не работает. Большое спасибо

1 Ответ

4 голосов
/ 14 июня 2019

Вы можете использовать что-то вроде этого. 

import React, { useRef } from 'react';

const Menu = () => {
  const timerRef = useRef(null);

  const onMouseEnter = () => {
    timerRef.current = setTimeout(() => {}, 1000);
  }

  const onMouseLeave = () => {
    if(timerRef.current) {
      clearTimeout(timerRef.current);
    }
  }

  return <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
}

Здесь происходит то, что мы сохраняем ссылку на таймер в реф.Затем его можно использовать для проверки и сброса таймера в другой функции.

...