浮层表单

ModalForm 和 DrawerForm 是 ProForm 的一个变体,本质上仍然是个表单。所以无法通过 footer 来自定义页脚,如果要定义页脚需要使用 submitter.render 来进行自定义。这两个表单的表现与 ProForm 相同,可以从 ProForm 直接修改而来。

ModalForm 和 DrawerForm 都提供了 trigger 来减少 state 的使用,如果你需要使用 state 来控制可以使用 openonOpenChange 来控制打开与关闭。

Drawer 表单

嵌套浮层表单

自定义 Modal 表单按钮

使用 open 和 onOpenChange

重置表单

API

ModalForm

ModalForm 组合了 Modal 和 ProForm 可以减少繁琐的状态管理。

参数说明类型默认值
trigger用于触发 Modal 打开的 dom,一般是 buttonReactNode-
open是否打开open-
onOpenChangevisible 改变时触发(open:boolean)=>void-
modalPropsModal 的 props,使用方式与 antd 相同。注意:不支持 'visible',请使用全局的 visibleprops-
title弹框的标题ReactNode-
width弹框的宽度Number-
onFinish提交数据时触发,如果返回一个 true。会关掉抽屉,如果配置了 destroyOnClose 还会重置表单。async (values)=>boolean-
submitTimeout提交数据时,禁用取消按钮的超时时间(毫秒)。Number-
submitter提交按钮相关配置,使用方式与ProForm 相同。ProForm-

DrawerForm

DrawerForm 组合了 Drawer 和 ProForm 可以减少繁琐的状态管理。

参数说明类型默认值
trigger用于触发 Modal 打开的 dom,一般是 buttonReactNode-
open是否打开boolean-
onOpenChangeopen 改变时触发(open:boolean)=>void-
drawerPropsDrawer 的 props,使用方式与 antd 相同。注意:不支持 'visible',请使用全局的 visibleprops-
title抽屉的标题ReactNode-
width抽屉的宽度Number-
onFinish提交数据时触发,如果返回一个 true。会关掉抽屉,如果配置了 destroyOnClose 还会重置表单。async (values)=>boolean-
submitTimeout提交数据时,禁用取消按钮的超时时间(毫秒)。Number-