React实现长按按钮持续触发数值增减功能的方案咨询

要实现长按按钮持续调整数值的功能，核心思路是通过定时器+鼠标事件监听：按下按钮时启动定时器重复执行增减逻辑，松开或离开按钮时停止定时器。以下是完整实现方案：

完整代码实现 #

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

const NumberInput = ({ type = 'number' }) => {
  const [tempValue, setTempValue] = useState(0);
  const [isEditing, setIsEditing] = useState(false);
  // 用useRef存储定时器ID，跨渲染周期保存引用
  const timerRef = useRef(null);

  const increaseValue = () => {
    const val = isNaN(tempValue) || tempValue === '' ? 0 : Number(tempValue);
    setTempValue(val + 1);
  };

  const decreaseValue = () => {
    const val = isNaN(tempValue) || tempValue === '' ? 0 : Number(tempValue);
    setTempValue(val - 1);
  };

  // 处理长按逻辑：立即执行一次操作，然后启动定时器重复执行
  const handleLongPress = (action) => {
    action();
    // 调整间隔时间可改变增减速度，这里设为100ms
    timerRef.current = setInterval(action, 100);
  };

  // 清除定时器的通用方法
  const clearTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
      timerRef.current = null;
    }
  };

  // 组件卸载时清理定时器，避免内存泄漏
  useEffect(() => {
    return () => clearTimer();
  }, []);

  return (
    <div className="flex flex-row h-8 w-20 rounded-lg relative bg-transparent">
      <button
        className="bg-action text-action-100 hover:text-gray-300 hover:bg-action-300 h-full w-20 rounded-l cursor-pointer outline-none active:bg-action-200"
        onClick={decreaseValue}
        onMouseDown={() => handleLongPress(decreaseValue)}
        onMouseUp={clearTimer}
        onMouseLeave={clearTimer}
      >
        <span className="m-auto text-md font-thin">−</span>
      </button>
      <input
        className="outline-none focus:outline-none text-center w-full bg-action font-thin text-xs antialiased flex items-center text-white"
        name="custom-input-number"
        value={tempValue}
        onChange={(e) => {
          setTempValue(e.target.value);
          type === 'number' && setIsEditing(true);
        }}
      />
      <button
        className="bg-action text-action-100 hover:text-gray-300 hover:bg-action-300 h-full w-20 rounded-r cursor-pointer active:bg-action-200"
        onClick={increaseValue}
        onMouseDown={() => handleLongPress(increaseValue)}
        onMouseUp={clearTimer}
        onMouseLeave={clearTimer}
      >
        <span className="m-auto text-md font-thin">+</span>
      </button>
    </div>
  );
};

export default NumberInput;

关键逻辑说明 #

• timerRef：使用useRef存储定时器ID，确保在组件多次渲染后仍能访问到同一个定时器引用，避免无法清除旧定时器的问题。
• handleLongPress：按下按钮时先执行一次增减操作（保证单次点击立即生效），随后启动定时器重复执行增减逻辑，间隔时间可根据需求调整（比如改成150ms会让增减速度更平缓）。
• clearTimer：在鼠标松开（onMouseUp）或鼠标离开按钮区域（onMouseLeave）时清除定时器，终止持续增减的操作。
• useEffect清理：组件卸载时自动清除定时器，防止内存泄漏。

内容的提问来源于stack exchange，提问作者Dan