如何在 React 上按下按鈕時繼續觸發方法

Question

我正在使用 React 實現一個輸入數字。 此輸入數字有一個 + 和 - 按鈕，用於增加或減少輸入內的值。

onClick方法工作正常，但是，我想知道，在按住按鈕時不斷觸發increase或decrease方法的方法是什么。

以下是我更新 state 的方法：

  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)
  }

這是組件

    <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}
      >
        <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)
        }}
      ></input>
      <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}
      >
        <span className="m-auto text-md font-thin">+</span>
      </button>
    </div>

現在，我想添加功能以在仍按下按鈕時保持增加/減少。

Answer 1

執行此操作的最簡單方法可能是跟蹤按鈕第一次按下和釋放的時間，並使用useRef跟蹤按鈕操作應該觸發的時間間隔。 看起來像這樣：

const intervalRef = useRef(null);

然后，當我們開始按下加號按鈕時，我們需要一個 function 來處理：

  const startCountUp = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setTempValue((prevCounter) => prevCounter + 1);
    }, 10);
  };

我們將添加一個類似的 function 用於當用戶按下減號按鈕時，它會倒計時：

  const startCountDown = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setTempValue((prevCounter) => prevCounter - 1);
    }, 10);
  };

接下來，我們需要一種在釋放按鈕時停止遞增計數器的方法。 我們將創建一個 function 來處理停止計時器：

  const stopCounter = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

然后我們需要在用戶與按鈕交互時正確觸發我們的函數。 我們按鈕的onMouseDown應該調用startCountUp （對於 + 按鈕），當用戶釋放鼠標時，我們想使用onMouseUp調用stopCounter以便我們停止遞增計數器。 此外，我們希望為用戶將鼠標移到按鈕外的情況做好准備，因此我們使用onMouseLeave來調用stopCounter 。

所有放在一起，這就是它的樣子：

  const [tempValue, setTempValue] = useState(0);
  const intervalRef = useRef(null);

  const startCountUp = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setTempValue((prevCounter) => prevCounter + 1);
    }, 10);
  };

  const startCountDown = () => {
    if (intervalRef.current) return;
    intervalRef.current = setInterval(() => {
      setTempValue((prevCounter) => prevCounter - 1);
    }, 10);
  };

  const stopCounter = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  };

  useEffect(() => {
    return () => stopCounter(); // when App is unmounted we should stop counter
  }, []);

  return (
    <div className="App">
      <div>
        <button
          onMouseDown={startCountDown}
          onMouseUp={stopCounter}
          onMouseLeave={stopCounter}
        >
          <span>−</span>
        </button>
        <input
          name="custom-input-number"
          value={tempValue}
          onChange={(e) => {
            setTempValue(e.target.value);
          }}
        ></input>
        <button
          onMouseDown={startCountUp}
          onMouseUp={stopCounter}
          onMouseLeave={stopCounter}
        >
          <span>+</span>
        </button>
      </div>
    </div>
  );

這是 CodeSandbox 上的完整示例：