跳到主要内容

useCounter

跟踪数值的 React hook。

Usage​

实时编辑器

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

  return (
    <div>
      <p>{current} max: 100; min: 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>
  );
};
结果
Loading...

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-