StepsForm - 分步表单

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

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

分步表单

1
创建实验
这里填入的都是基本信息
2
设置参数
这里填入运维参数
3
发布实验
这里填入发布判断
策略一
策略二

分步表单垂直模式

1
创建实验
这里填入的都是基本信息
2
设置参数
这里填入运维参数
3
第三步
这里填入运维参数

自定义分步表单按钮

1
创建实验
2
设置参数
3
发布实验
策略一
策略二

分步表单-多卡片

1
第一步骤
2
第二步骤
3
第三步骤
源和目标
节点
选择来源节点
选择目标节点
顶部对齐
策略一
策略二

分步表单-与 Modal 配合使用

编辑场景下的分步表单

1
工作信息
2
同步表单信息
请选择

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> | - |