Проблема UseRef в UseEffect

Question

Пример является функциональным компонентом. Я использую useRef() хук, чтобы получить ref a div. Я хочу прикрепить прослушиватель событий к ref , когда Пример монтируется.

const Example: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = (): void => {
    // mouse click logic
  };

  useEffect(() => {
    if (ref && ref.current) {
      ref.current.addEventListener('click', handleClick);
    }

    return (): void => {
      if (ref && ref.current) {
        ref.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <div ref={ref} />
  );
};

То, что происходит, это ref по-прежнему равен нулю, когда Пример сделал монтирование. Поэтому я не могу прикрепить event listener к нему. альтернативное решение состоит в том, чтобы назначить id для div и подключить прослушиватель событий к DOM-узлу напрямую , что я не хочу делать

Любое руководство о том, как мне прикрепить прослушиватель событий к ref , будет действительно полезным:)

Answer 1

Вам не нужен реф для этого. React поддерживает события нажатия «из коробки», используя стандартный декларативный синтаксис.

const Example: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);

  const handleClick = (): void => {
    // mouse click logic
  };

  return (
    <div onClick={handleClick} />
  );
};

Вы упомянули в комментариях, что причина, по которой вы пытались это сделать, заключалась в том, чтобы заставить замолчать правило пуха. Но использование ссылки не решает проблему, на которую указывает линтер, просто делает код достаточно сложным, чтобы линтер не мог понять, что вы делаете, и поэтому не понимает, что ваш код имеет то же самое проблема, как и раньше.

Чтобы исправить проблему, добавьте атрибут div в div, чтобы программы чтения с экрана знали, какова цель этого div. Какую роль использовать, зависит от того, что делает обработчик кликов, но наиболее вероятные роли - это «кнопка» или «ссылка».

return (
  <div onClick={handleClick} role="button" />
);

Answer 2

Вы можете использовать onClick для установки события.

const Example = () => {
  const handleClick = useCallback(() => {
    // mouse click logic
  }, [])

  return (
    <div onClick={handleClick}>Hello World</div>
  );
};

Но если вы хотите использовать ссылку, вам нужно хорошо понять некоторые понятия. Во-первых, я проверил ваш код, и ссылка готова, когда useEffect выполняется, потому что useEffect выполняется после отрисовки DOM.

Во-вторых, вам нужно понять зависимости хука, потому что в вашем коде handleClick создается в каждом рендере, но useEffect использует первую ссылку, созданную этой функцией, поэтому у вас могут возникнуть проблемы, если вы используете зависимости внутри handleClick

Наконец, я рекомендую вам инвестировать useCallback, useState, useRef, useEffect и useReducer знать различия и лучшие ситуации для каждого.