当前位置：首页 > React

react实现单击双击事件

2026-01-27 18:33:26React

实现单击和双击事件

在React中区分单击和双击事件需要处理事件延迟和逻辑判断。以下是两种常见方法：

使用原生事件处理

通过onClick和onDoubleClick结合setTimeout实现：

import React, { useState } from 'react';

function ClickDemo() {
  const [clickTimeout, setClickTimeout] = useState(null);

  const handleClick = () => {
    if (clickTimeout) {
      clearTimeout(clickTimeout);
      setClickTimeout(null);
      console.log('双击事件');
    } else {
      const timer = setTimeout(() => {
        console.log('单击事件');
        setClickTimeout(null);
      }, 300); // 延迟阈值设为300ms
      setClickTimeout(timer);
    }
  };

  return <button onClick={handleClick}>点击测试</button>;
}

使用第三方库

安装react-double-click库简化实现：

npm install react-double-click

import DoubleClick from 'react-double-click';

function App() {
  return (
    <DoubleClick
      singleClick={() => console.log('单击')}
      doubleClick={() => console.log('双击')}
      delay={300}
    >
      <button>测试按钮</button>
    </DoubleClick>
  );
}

自定义Hook封装

创建可复用的useClickHandler Hook：

react实现单击双击事件

function useClickHandler({ singleClick, doubleClick, delay = 300 }) {
  const [timer, setTimer] = useState(null);

  return () => {
    if (timer) {
      clearTimeout(timer);
      setTimer(null);
      doubleClick?.();
    } else {
      const newTimer = setTimeout(() => {
        singleClick?.();
        setTimer(null);
      }, delay);
      setTimer(newTimer);
    }
  };
}

// 使用示例
function Demo() {
  const handleClick = useClickHandler({
    singleClick: () => console.log('单击'),
    doubleClick: () => console.log('双击')
  });

  return <button onClick={handleClick}>智能按钮</button>;
}