StepsForm - 分步表单

StepsForm 通过 Provider 来管理子表单的数据,每个字表单都是完整的数据,在 StepsForm 组合成最后的数据。同时自带了一个进度条,和管理进度条的相关 API.

StepsForm 继承了 Form.Provider ,相关文档可以看这里,转化 moment 的值是 ProForm 提供的功能,所以 onFormFinish 和 onFormChange 其中的值都是未经转化的。

分步表单

自定义分步表单按钮

分步表单-多卡片

分步表单-与 Modal 配合使用

编辑场景下的分步表单

API

参数说明类型默认值
current当前表单的步骤数,从 0 开始number0
onCurrentChangecurrent 发生改变的事件(current:number)=>void-
onFinish表单最后一步提交成功触发,如果返回true就会自动重置表单(包括StepForm变回第一步)(values:T)=>void | boolean-
stepsPropsStepsForm 自带的 Steps 的 props,使用方式与 antd 相同,但是去掉了 current 和 onChangeprops-
stepFormRender自定义当前展示的表单,返回 dom 在表单内部(form) => ReactNode-
stepsFormRender自定义整个表单区域,返回的 dom 在表单的外部(form,submitter) => ReactNode-
stepsRender自定义步骤器(steps,dom)=>ReactNode-
formRefStepForm action 的引用,便于自定义触发MutableRefObject<FormInstance>-

StepForm

与 ProForm 完全相同,只是 onFinish 支持了 Promise,如果返回 false, 就不会跳转下一步。

| onFinish | 表单提交成功触发 | (values:T)=>Promise<false> | - |