多步表单页面
概览
多步表单（向导）模式通过将复杂流程（通常与配置或设置相关）分解为多个步骤，帮助用户成功完成这些流程。通过对信息和步骤进行功能或语义分组，它们可以限制认知负担，允许更快地从错误中恢复，并且通过使用户能够保存进度并轻松返回到上次离开的地方，从而允许会话中断。
注意：为避免大量的设置和额外的库，此模板使用 window.location.hash 进行步骤导航。在 Grafana 中，我们使用 @grafana/runtime 中的 locationService 来处理路由导航。
源代码
import React, { useEffect } from 'react';
import { Stack } from '@grafana/ui';
import { Stepper } from '@site/src/components/templates/MultistepFormPage/Stepper';
import { Data, StepKey } from '@site/src/components/templates/MultistepFormPage/types';
import { Step } from '@site/src/components/templates/MultistepFormPage/Steps/Step';
import { useForm, FormProvider } from 'react-hook-form';
import { getValidationResults } from '@site/src/components/templates/MultistepFormPage/utils/validation';
interface MultistepFormPageProps {
steps: Array<{ id: StepKey; name: string }>;
getStepUrl: (id?: string | number) => string;
activeStep: StepKey;
setVisitedSteps: (steps: StepKey[]) => void;
visitedSteps: StepKey[];
}
export const defaultFormData: Data = {
name: '',
email: '',
message: '',
radio: 'option1',
text: '',
slider: 1,
};
export const MultistepFormPage = ({
steps,
getStepUrl,
activeStep,
setVisitedSteps,
visitedSteps,
}: MultistepFormPageProps) => {
const methods = useForm({ defaultValues: defaultFormData, mode: 'onBlur' });
useEffect(() => {
if (!visitedSteps.includes(activeStep)) {
setVisitedSteps([...visitedSteps, activeStep]);
}
}, [activeStep]);
return (
<Stack direction={'column'}>
<FormProvider {...methods}>
<Stepper
// Prevent the user from moving to the next step if there are form errors
onStepChange={(_, event) => {
if (!!Object.keys(methods.formState.errors).length) {
event?.preventDefault();
}
}}
activeStep={activeStep}
steps={steps}
validationResults={getValidationResults(methods.getValues())}
getNextUrl={getStepUrl}
visitedSteps={visitedSteps}
/>
<Step activeStep={activeStep} />
</FormProvider>
</Stack>
);
};
export default MultistepFormPage;
用法
何时使用
向导模式应应用于以下交互：
- 复杂或冗长。
- 可以划分为逻辑步骤。
- 需要按照特定顺序执行。
- 有明确的开始和结束（开始于
添加，结束于保存）。 - 与完成特定操作相关，例如创建对象、配置设置等。
何时不使用
- 对于短表单。
- 对于无法逻辑划分为步骤的表单。
- 对于产品导览。