React Hooks addEventListener undefined

Question

Я новичок в хуках React, мне просто интересно, почему addEventListener не определен, хотя я использовал его внутри useEffect.

function useHover() {
    const ref = useRef();
    const [hovered, setHovered] = useState(true);

    const enter = () => setHovered(true);
    const leave = () => setHovered(false);

    useEffect(() => {
      ref.current.addEventListener('mouseenter', enter);
      ref.current.addEventListener('mouseleave', leave);
      return () => {
        ref.current.removeEventListener('mouseenter', enter);
        ref.current.removeventListener('mouseleave', leave);
      };
    }, [ref]);

    return [ref, hovered];
  }`enter code here`

Answer 1

Поскольку ref.current всегда неопределен. Вам нужно установить ref для некоторого элемента html, чтобы избежать неопределенности. Имхо, вам нужно иметь setRef function / const в вашем хуке, а затем возвращать его из хука как return [ref, setRef, hovered]; Тогда в компоненте, где вы используете этот хук, когда этот компонент монтируется, установите ref для какого-либо элемента.

Обновление:

На самом деле все, что вам нужно сделать, это обернуть

ref.current.addEventListener("mouseenter", enter);
ref.current.addEventListener("mouseleave", leave);

с if (ref.current) { ... }. В противном случае вы пытаетесь подключить прослушиватели событий до того, как на элемент html будет сделана ссылка. Пример

Answer 2

Вы можете вложить эти команды в componentDidMount / componentWillMount, и это должно поставить этих слушателей в очередь, но это не лучшая практика.

Вот документы, которым я следую при обработке событий.

url: https://reactjs.org/docs/handling-events.html