当前位置：首页 > React

react如何监听

2026-02-26 00:04:54React

React 监听事件的方法

在React中监听事件可以通过多种方式实现，包括原生DOM事件监听、React合成事件以及第三方库的使用。

使用React合成事件

React提供了合成事件系统，事件处理函数通过组件props传递。例如，监听点击事件：

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

  return <button onClick={handleClick}>Click me</button>;
}

监听原生DOM事件

对于需要直接监听DOM元素事件的场景，可以通过useEffect和addEventListener实现：

import { useEffect, useRef } from 'react';

function Component() {
  const ref = useRef();

  useEffect(() => {
    const handleClick = () => console.log('Element clicked');
    ref.current.addEventListener('click', handleClick);

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

  return <div ref={ref}>Click me</div>;
}

监听自定义事件

通过EventEmitter或自定义事件系统实现跨组件通信：

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    const handler = (e) => console.log('Custom event:', e.detail);
    window.addEventListener('customEvent', handler);

    return () => {
      window.removeEventListener('customEvent', handler);
    };
  }, []);

  return <div>Listening to custom events</div>;
}

监听全局事件

对于如键盘、滚动等全局事件，可以直接在useEffect中监听：

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    const handleKeyDown = (e) => console.log('Key pressed:', e.key);
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return <div>Press any key</div>;
}

使用第三方库

对于复杂的事件监听需求，可以使用如react-use等库提供的hooks：

import { useKey } from 'react-use';

function Component() {
  useKey('Enter', () => console.log('Enter pressed'));

  return <div>Press Enter key</div>;
}