react中如何使用监听

在 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 函数可以确保在组件卸载时移除事件监听器，避免内存泄漏。

到此这篇关于react中如何使用监听的文章就介绍到这了,更多相关react使用监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！