当前位置：首页 > React

react如何监听

2026-03-30 16:47:10React

监听事件的基本方法

在React中，监听事件通常通过组件的onClick、onChange等内置事件属性实现。例如，监听按钮点击事件：

<button onClick={() => console.log('按钮被点击')}>点击</button>

自定义事件监听

对于非原生DOM事件（如自定义事件或全局事件），可以使用addEventListener和removeEventListener：

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    const handleEvent = () => console.log('事件触发');
    window.addEventListener('customEvent', handleEvent);
    return () => window.removeEventListener('customEvent', handleEvent);
  }, []);
  return <div>监听自定义事件</div>;
}

监听状态变化

通过useEffect监听React状态（state）或属性（props）的变化：

react如何监听

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('count变化:', count);
}, [count]);

监听路由变化

使用React Router时，可通过useLocation或useEffect监听路由变化：

import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  useEffect(() => {
    console.log('路由变化:', location.pathname);
  }, [location]);
}

监听键盘事件

监听全局键盘事件需在useEffect中绑定：

react如何监听

useEffect(() => {
  const handleKeyPress = (e) => console.log('按键:', e.key);
  document.addEventListener('keydown', handleKeyPress);
  return () => document.removeEventListener('keydown', handleKeyPress);
}, []);

监听滚动事件

通过useEffect监听页面滚动：

useEffect(() => {
  const handleScroll = () => console.log('滚动位置:', window.scrollY);
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

监听子组件事件

通过父组件传递回调函数（props）监听子组件事件：

function Child({ onAction }) {
  return <button onClick={onAction}>触发事件</button>;
}

function Parent() {
  const handleAction = () => console.log('子组件事件触发');
  return <Child onAction={handleAction} />;
}

标签: react