跳到主要内容

ModalForm - 弹窗表单

通过 schema 生成一个 弹窗 表单。

这个组件是 Modal 和 SchemaForm 的结合，因此可以透传它们两者的 API。

基础​

基本的使用方法​

非受控模式 (推荐)​

利用 RAK 提供的 innerRef，无需额外定义 open 变量就能控制弹窗，用更加简洁。后面的用例默认使用该方式。

表单类型​

打开的表单有三种类型：新增，编辑，只读。还能传入初始值。

onFinish​

在 onFinish 函数里可以根据表单类型来调不同的接口。

onOpen​

利用 onOpen 在弹窗打开时请求接口。

布局​

通过 formProps 属性传入 SchemaForm 组件的 API, 来改变表单的布局。

多列排布​

长表单校验时滚动到所在项​

表单操作​

显示与隐藏​

使用 valueType=dependency 来做显示与隐藏。

表单数据​

表单数据请参考 SchemaForm

约定式​

与 SchemaForm 一样，ModalForm 同样支持约定式数据处理.

利用 innerRef 存储额外信息​

与 SchemaForm 一样，ModalForm 也能利用 innerRef 存储额外数据.

API​

ModalForm​

ModalForm 类型是 ModalFormSelfType 和 Antd Modal 的结合。

ModalFormSelfType​

属性名描述类型默认值
innerRef非受控模式(推荐); 在open没传的情况下可以通过innerRef来打开弹窗;--
formRef用于获取form实例; 请使用formRef而不要通过form属性传入一个form实例来获取实例. 因为RAK组件对form实例进行了额外的封装, 一定要通过formRef来获取.React.MutableRefObject<ProFormInstance>--
columns表单项的配置描述;FormColumnType[](必选)
onFinish点击弹窗确定按钮后的回调;(values, formType, formData) => Promise | void--
onOpen打开弹框后的回调, 可以在这里请求数据;(formType, formRef, formData) => Promise | void--
formProps传递给表单的参数, 请参考SchemaForm组件的apiOmit<SchemaFormProps, 'innerRef' | 'formRef' | 'onFinish' | 'columns' | 'form'>--
confirmOnClose关闭弹窗提醒, 当表单项发生改动时会弹出确认框boolean | { title?: string; content?: string }{ title: '确认关闭', content: '表单项内容未保存, 是否确认关闭?' }

ModalFormInnerRefType​

属性名描述类型默认值
openModal用于打开弹窗; formType 可用于在 onFinish 的时候判断表单类型;(formType?: FormType | undefined, initialValues?: object | null | undefined, cb?: (() => void) | undefined) => void(必选)
formType当前的表单类型FormType--
data可以存储一些额外数据Record<string, any>(必选)
setData存入数据; setData 和 react 的 setState 一样, 只需要传入关心的字段就可以, 不会覆盖其它的字段。(values: Record<string, any>) => void(必选)