在 React 中将事件监听器添加到 Ref

作者

在 React 中将事件侦听器添加到 Ref

Add an event listener to a Ref in React

在 React 中将事件监听器添加到 ref：

  1. ref在元素上设置道具。
  2. 使用currentref 上的属性来访问元素。
  3. useEffect在钩子中添加事件侦听器。
应用程序.js
import {useRef, useEffect} from 'react';

const App = () => {
  const ref = useRef(null);

  useEffect(() => {
    const handleClick = event => {
      console.log('Button clicked');
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    return () => {
      element.removeEventListener('click', handleClick);
    };
  }, []);

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

export default App;

反应引用添加事件监听器

useRef ()钩子可以传递一个初始值作为参数。该钩子返回一个可变的 ref 对象，其.current属性被初始化为传递的参数。

请注意，我们必须访问currentref 对象上的属性才能访问我们设置prop的button元素。 ref

当我们将 ref prop 传递给元素时，例如<div ref={myRef} />，React 将.currentref 对象的属性设置为相应的 DOM 节点。

我们将一个空的 dependencies 数组传递给
useEffect挂钩，因此它只会在组件安装时运行。

应用程序.js
useEffect(() => {
  const handleClick = event => {
    console.log('Button clicked');
  };

  const element = ref.current;

  element.addEventListener('click', handleClick);

  return () => {
    element.removeEventListener('click', handleClick);
  };
}, []);

我们将对该元素的引用存储在一个变量中，并使用
addEventListener
方法向click按钮添加一个事件侦听器。

该方法采用的第一个参数是要侦听的事件类型，第二个参数是在指定类型的事件发生时调用的函数。

当组件卸载时，我们从useEffect钩子返回的函数被调用。

我们使用
removeEventListener
方法来删​​除我们之前注册的事件监听器。

清理步骤很重要，因为我们要确保我们的应用程序中没有任何内存泄漏。

–

发表评论