当前位置：首页 > React

react实现长按效果

2026-01-27 06:53:45React

实现长按效果的方法

在React中实现长按效果可以通过监听onMouseDown、onTouchStart、onMouseUp、onTouchEnd等事件，结合定时器来实现。以下是两种常见的方法：

使用原生事件和定时器

通过设置定时器来判断用户是否长按，并在长按时间到达后触发相应操作。

import React, { useState, useRef } from 'react';

const LongPressButton = () => {
  const [isLongPress, setIsLongPress] = useState(false);
  const timerRef = useRef(null);

  const handlePressStart = () => {
    timerRef.current = setTimeout(() => {
      setIsLongPress(true);
      console.log('长按触发');
    }, 1000); // 设置长按时间为1秒
  };

  const handlePressEnd = () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    if (isLongPress) {
      setIsLongPress(false);
    }
  };

  return (
    <button
      onMouseDown={handlePressStart}
      onMouseUp={handlePressEnd}
      onMouseLeave={handlePressEnd}
      onTouchStart={handlePressStart}
      onTouchEnd={handlePressEnd}
    >
      长按我
    </button>
  );
};

export default LongPressButton;

使用自定义Hook封装

将长按逻辑封装成自定义Hook，方便复用。

react实现长按效果

import { useRef, useEffect } from 'react';

const useLongPress = (callback, duration = 1000) => {
  const timerRef = useRef(null);
  const isLongPress = useRef(false);

  const start = () => {
    timerRef.current = setTimeout(() => {
      isLongPress.current = true;
      callback();
    }, duration);
  };

  const clear = () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  };

  useEffect(() => {
    return () => clear();
  }, []);

  return {
    onMouseDown: start,
    onMouseUp: clear,
    onMouseLeave: clear,
    onTouchStart: start,
    onTouchEnd: clear,
  };
};

const LongPressButton = () => {
  const longPressProps = useLongPress(() => {
    console.log('长按触发');
  }, 1000);

  return <button {...longPressProps}>长按我</button>;
};

export default LongPressButton;