在 React 中,您可以使用 addEventListener 函数来监听事件。以下是一个示例:
import React, { useRef, useEffect } from 'react';function App() {const inputRef = useRef(null);useEffect(() => {inputRef.current.addEventListener('input', handleInputChange);return () => {inputRef.current.removeEventListener('input', handleInputChange);};}, []);function handleInputChange(event) {console.log(event.target.value);}return (<div><input ref={inputRef} /></div>);
}export default App;
在这个示例中,我们定义了一个名为 App 的组件,并使用 useRef hook 创建了一个名为 inputRef 的 ref。我们在 useEffect hook 中使用 addEventListener 函数来监听 input 事件,并在组件卸载时使用 removeEventListener 函数来移除监听器。在 handleInputChange 函数中,我们可以访问 event.target.value 来获取输入框的值。最后,我们将 inputRef ref 传递给 <input> 元素。
使用 addEventListener 函数可以监听任何事件,例如 click、mouseover、keydown 等。在 useEffect hook 中使用 addEventListener 和 removeEventListener 函数可以确保在组件卸载时移除事件监听器,避免内存泄漏。