useCounter

跟蹤數值的 React hook。

Usage

即時編輯器

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

結果

10 最大值：100；最小值：1；

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) | undefined	0
max	最大值。不提供则无上限	number | null | undefined	-
min	最小值。不提供则无下限	number | null | undefined	-