首页react addEventListener useRef 修改

react addEventListener useRef 修改

时间: 2024-09-19 16:12:24 浏览: 81

在React中，`addEventListener`通常用于处理DOM事件，而`useRef`则是创建一个可变的引用，用于访问组件的DOM元素。当你想在React组件中监听某个事件并可能需要修改这个DOM元素时，可以结合这两个API。例如，假设你想在一个按钮上添加点击事件，并在点击后改变按钮的文字： ```jsx import React, { useRef, useEffect } from 'react'; function MyComponent() { const buttonRef = useRef(null); // 使用useRef创建对按钮元素的引用 // 当组件挂载时，给按钮添加点击事件处理器 useEffect(() => { function handleClick() { buttonRef.current.textContent = "已点击"; // 修改按钮文本 } buttonRef.current.addEventListener('click', handleClick); // 添加点击事件 return () => buttonRef.current.removeEventListener('click', handleClick); // 组件卸载时移除事件处理器，防止内存泄漏 }, []); return ( <button ref={buttonRef}>点击我</button> ); } export default MyComponent; ``` 在这个例子中，`useEffect`确保了事件处理器只在组件渲染完成后添加，并在组件卸载前移除，保持良好的性能和内存管理。

阅读全文