useCounter

跟蹤數值的 React hook。

useCounter 管理一個數值計數器狀態，提供 increment、decrement、set 和 reset 操作。支援可選的最小值和最大值約束以限制計數範圍。

使用場景

  • 建構數量選擇器或購物車中的數量控制
  • 實作分頁控制或步驟指示器
  • 管理任何需要遞增/遞減操作的數值狀態

注意事項

  • 範圍約束：設定 min 和 max 選項可防止計數器超出指定範圍。
  • 重置：reset 函式將計數器恢復到初始值。
  • 相關 hooks：另請參閱 useBoolean 用於布林切換，以及 useCycleList 用於在值清單中循環。

Usage

Live Editor

function Demo() {
  const [current, set, inc, dec, reset] = useCounter(10, 100, 1);

  return (
    <div>
      <p>{current} 最大值：100；最小值：1；</p>
      <div>
        <button
          type="button"
          onClick={() => {
            inc();
          }}
          style={{ marginRight: 8 }}
        >
          inc()
        </button>
        <button
          type="button"
          onClick={() => {
            dec();
          }}
          style={{ marginRight: 8 }}
        >
          dec()
        </button>
        <button
          type="button"
          onClick={() => {
            set(3);
          }}
          style={{ marginRight: 8 }}
        >
          set(3)
        </button>
        <button type="button" onClick={reset} style={{ marginRight: 8 }}>
          reset()
        </button>
      </div>
    </div>
  );
};
Result

API

useCounter

Returns

readonly [number, (newState: number | ((prev: number) => number) | (() => number)) => void, (delta?: number | undefined) => void, (delta?: number | undefined) => void, () => void]: 包含以下元素的元組：

  • 計數器的當前值。
  • 設定計數器狀態的函數。它可以接受數字或返回數字的函數。
  • 遞增計數器的函數。它可以選擇接受一個數字來增加計數器，預設為 1。
  • 遞減計數器的函數。它可以選擇接受一個數字來減少計數器，預設為 1。
  • 將計數器重設為其初始值的函數。

Arguments

參數名描述類型預設值
initialValue初始值，可以为数字或者一个初始化的函数number | (() => number) | undefined0
max最大值。不提供则无上限number | null | undefined-
min最小值。不提供则无下限number | null | undefined-