react单击模拟双击事件自定义hook

// 第一个参数为单击事件函数 第二个参数为双击事件函数  
const useClick = (callback, doubleCallback) => {
    const clickRef = useRef({
      clickCount: 0,
      time: 0,
      timer: null,
    });
    return (...args) => {
      clickRef.current.clickCount += 1;
      clickRef.current.time = Date.now();
      clickRef.current.timer = setTimeout(() => {
        if (
          Date.now() - clickRef.current.time <= 200 &&
          clickRef.current.clickCount === 2
        ) {
          doubleCallback && doubleCallback.apply(null, args);
        }
        if (clickRef.current.clickCount === 1) {
          callback && callback.apply(null, args);
        }
        clearTimeout(clickRef.current.timer);
        clickRef.current.clickCount = 0;
      }, 200);
    };
  };

使用方法:

  const onLabelClick = useClick(
    () => {
      console.log('单击事件触发了');
    },
    () => {
      console.log('双击事件触发了');
    }
  );

<label onClick={() => onLabelClick(item)} htmlFor={item.id}>
          {item.name}
        </label>

这里用单击事件模拟双击了,既能处理同一个元素的单击事件又能处理双击事件,互不影响