简体中文

useCounter

Tags:

State

一个提供包含增加、减少和重置功能的计数器的 React Hook。

场景

处理数量计算场景： 提供增加、减少、设置、获取、重置计数器的功能
界面交互场景： 实现用户界面上数量的动态更新和显示，如购物车商品数量、轮播图切换
限制数值范围场景： 对数值进行最大值和最小值的限制 (建议使用更加语意化的 useClamp)
...

演示

源码

Count:

Min:

Max:

Initial:

用法

const [count, actions] = useCounter(20)
const [count, actions, couterState] = useCounter(20, { min: 1, max: 100 })

// 增加计数器
actions.inc()
actions.inc(2)

// 减少计数器
actions.dec()
actions.dec(4)

// 设置计数器为指定值
actions.set(10)

// 重置计数器为初始值（或同时重设初始值）
actions.reset()
actions.reset(12)

// 获取计数器的值，值为 count
acitons.get()

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook 🎨 Demo 📄 Document

API

const [count, actions, couterState] = useCounter(initialCount, options)

初始值 InitialCount

一个 number 类型的初始值。

选项 Options

export type UseCounterOptions = {
  /**
   * 计数器的最大值
   */
  max?: number
  /**
   * 计数器的最小值
   */
  min?: number
}

返回值

export interface UseCounterReturnsAction {
  /**
   * 增加计数器
   */
  inc: (delta?: number) => void
  /**
   * 减少计数器
   */
  dec: (delta?: number) => void
  /**
   * 设置计数器
   */
  set: (value: number) => void
  /**
   * 获取计数器
   */
  get(): number
  /**
   * 重置计数器
   */
  reset: (n?: number) => void
}

export interface UseCounterState {
  /**
   * 计数器的值
   */
  count: number
  /**
   * 计数器的最大值
   */
  max: number
  /**
   * 计数器的最小值
   */
  min: number
  /**
   * 计数器的初始值
   */
  initialCount: number
}

export type UseCounterReturns = readonly [
  /**
   * 计数器的计数状态
   */
  number,
  /**
   * 控制计数器的功能
   */
  UseCounterReturnsAction,
  /**
   * 计数器的完整内部状态
   */
  UseCounterState,
]

ON THIS PAGE

#useCounter

#场景

#演示

#用法

#源码

#API

#初始值 InitialCount

#选项 Options

#返回值

useCounter

场景

演示

用法

源码

API

初始值 InitialCount

选项 Options

返回值