useStepper

一个帮助创建步骤器状态的 React 钩子。

演示

源码

Personal Information

Name:
Email:
Next: Address
{
  "name": "",
  "email": "",
  "address": "",
  "payment": ""
}

用法

请查看 API。

源码

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

API

const step = useStepper(steps, initialStepIdx)

步骤 Steps

一个array类型的步骤数组,步骤可以是包含函数、字符串或数字等任何对象。

初始步骤索引 InitialStepIdx

一个代表初始步骤索引的number类型。

返回值

export interface UseStepperReturns<StepName, Steps, Step> { /** * 步骤列表。 */ steps: Readonly<Steps> /** * 当前步骤的索引。 */ index: number /** * 当前步骤。 */ current: Step /** * 下一个步骤,如果当前步骤是最后一个则为 undefined。 */ next: StepName | undefined /** * 前一个步骤,如果当前步骤是第一个则为 undefined。 */ previous: StepName | undefined /** * 当前步骤是否为第一个。 */ isFirst: boolean /** * 当前步骤是否为最后一个。 */ isLast: boolean /** * 获取指定索引的步骤。 */ at: (index: number) => Step | undefined /** * 通过指定名称获取步骤。 */ get: (step: StepName) => Step | undefined /** * 跳转到指定的步骤。 */ goTo: (step: StepName) => void /** * 跳转到下一个步骤。如果当前步骤是最后一个,则不做任何操作。 */ goToNext(): void /** * 跳转到前一个步骤。如果当前步骤是第一个,则不做任何操作。 */ goToPrevious(): void /** * 回到给定步骤,仅当当前步骤是之后的步骤时。 */ goBackTo: (step: StepName) => void /** * 检查给定步骤是否为下一个步骤。 */ isNext: (step: StepName) => boolean /** * 检查给定步骤是否为之前的步骤。 */ isPrevious: (step: StepName) => boolean /** * 检查给定步骤是否为当前步骤。 */ isCurrent: (step: StepName) => boolean /** * 检查当前步骤是否在给定步骤之前。 */ isBefore: (step: StepName) => boolean /** * 检查当前步骤是否在给定步骤之后。 */ isAfter: (step: StepName) => boolean }