Question

示例是一个功能组件。我正在使用useRef()钩子来获取 ref 一个div元素。我想在安装示例时，将事件监听器附加到引用。

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} />
  );
};

正在发生的是，当示例安装时，引用仍然为空。因此，我无法在其上附加event listener。 另一种解决方案是将一个id分配给div，然后将事件监听器直接附加到DOM节点上，我不是真正的。 >

关于如何将事件侦听器附加到 ref 的任何指南都会非常有用：）

Answer 1

您可以使用onClick来设置事件。

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

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

但是，如果您想使用ref，则需要了解一些概念。首先，我已经测试了您的代码，并且在执行useEffect时已准备好引用，因为在绘制DOM之后执行了useEffect。

其次，您需要了解钩子的依赖性，因为在代码中handleClick是在每个渲染器中创建的，但是useEffect使用的是此函数创建的第一个引用，因此如果在{{ 1}}

最后，我建议您投资handleClick和useCallback, useState, useRef, useEffect，以了解彼此的区别和最佳情况。

Answer 2

您不需要为此的参考。 React使用标准的声明性语法开箱即用地支持click事件。

char uppercaseChar = (char) ((int)(Math.random()*100)%26+65);

char lowercaseChar = (char) ((int)(Math.random()*1000)%26+97);

您在评论中提到尝试这样做的原因是使棉绒规则保持沉默。但是使用ref并不能解决linter指出的问题，它只会使代码变得非常复杂，以致linter无法弄清您在做什么，因此也没有意识到您的代码具有相同的含义问题还是一样。

要解决绒毛问题，请在div中添加一个role属性，以便屏幕阅读器知道此div的用途。确切地使用哪个角色取决于点击处理程序在做什么，但是最可能的角色可能是“按钮”或“链接”。

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

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

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

UseEffect中的UseRef问题

2 个答案: