ModalForm - 弹窗表单

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

这是 Modal 和 SchemaForm 的结合, 因此可以透传 Modal 和 SchemaForm 的 api.

一个基本的弹窗表单

非受控模式 (推荐)

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

多列排布

formProps 属性可以透传 SchemaForm 组件的 api, 来改变表单的排列样式.

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

表单类型和表单初始值

innerRef 上的 openModal 方法接受两个参数, 第一个是 formType, 第二个是 initialValues.

formType 有三种类型, new | edit | read, 默认值是 new, 在 onFinish 和 onOpen 属性里可以根据该值做不同的处理.
initialValues 是给表单的初始值.

onOpen 请求数据后回显

可利用 formType 只在编辑和查看时才请求

表单项显示隐藏

请使用 valueType='dependency'来做显示控制, 原来的 renderFormItem 已经弃用.

onFinish

onFinish 回调有三个参数, 第一个参数是表单里收集到的值 values, 第二个参数是表单类型 formType, 第三个参数是打开弹窗时赋给表单的初始值 formData (这里可以携带一些额外数据比如 id 等).

⭐ 数据处理和收集 - 约定式

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

利用 innerRef 存储额外信息

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

API

ModalForm

属性名	描述	类型	默认值
open	open如果传入则为受控模式; 如果open没传可以通过innerRef来打开弹窗	`boolean`	`--`
innerRef	非受控模式(推荐); 在open没传的情况下可以通过innerRef来打开弹窗; ref.current.openModal('new', initialValues)	`MutableRefObject<any>`	`--`
columns	表单项的配置描述;	`FormColumnType[]`	`(必选)`
onFinish	点击弹窗确定按钮后的回调;	`(values: any, formType: FormType, formData: any) => void \| Promise<any>`	`--`
onOpen	打开弹框后的回调, 可以在这里请求数据;	`(formType: FormType, formRef: { current: FormInstance<any>; }, formData: any) => void \| Promise<any>`	`--`
formProps	传递给表单的参数, 请参考SchemaForm组件的api	`SettingFormProps`	`--`
confirmOnClose	关闭弹窗时, 如果表单项发生了改动会弹出确认框	`boolean`	`true`

InnerRef

参数	说明	类型	默认值
openModal	用于打开弹窗; formType 可用于在 onFinish 的时候判断表单类型; `innerRef.current?.openModal('edit', {name: 'jack', age: 18})`	`(formType?: 'new' \| 'edit' \| 'read', initialValues?: any) => void`	-
formType	当前的表单类型	`'new' \| 'edit' \| 'read'`	`new`
data	可以存储表单中的额外数据	`Record<string, any>`	`{}`
setData	存入数据; setData 和 react 的 setState 一样, 只需要传入关心的字段就可以, 不会覆盖其它的字段.	`(Record<string, any>) => void`	`--`

‌
‌
‌
‌

ModalForm - 弹窗表单

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

这是 Modal 和 SchemaForm 的结合, 因此可以透传 Modal 和 SchemaForm 的 api.

一个基本的弹窗表单

非受控模式 (推荐)

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

多列排布

formProps 属性可以透传 SchemaForm 组件的 api, 来改变表单的排列样式.

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

表单类型和表单初始值

innerRef 上的 openModal 方法接受两个参数, 第一个是 formType, 第二个是 initialValues.

formType 有三种类型, new | edit | read, 默认值是 new, 在 onFinish 和 onOpen 属性里可以根据该值做不同的处理.
initialValues 是给表单的初始值.

onOpen 请求数据后回显

可利用 formType 只在编辑和查看时才请求

表单项显示隐藏

请使用 valueType='dependency'来做显示控制, 原来的 renderFormItem 已经弃用.

onFinish

⭐ 数据处理和收集 - 约定式

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

利用 innerRef 存储额外信息

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

API

ModalForm

属性名	描述	类型	默认值
open	open如果传入则为受控模式; 如果open没传可以通过innerRef来打开弹窗	`boolean`	`--`
innerRef	非受控模式(推荐); 在open没传的情况下可以通过innerRef来打开弹窗; ref.current.openModal('new', initialValues)	`MutableRefObject<any>`	`--`
columns	表单项的配置描述;	`FormColumnType[]`	`(必选)`
onFinish	点击弹窗确定按钮后的回调;	`(values: any, formType: FormType, formData: any) => void \| Promise<any>`	`--`
onOpen	打开弹框后的回调, 可以在这里请求数据;	`(formType: FormType, formRef: { current: FormInstance<any>; }, formData: any) => void \| Promise<any>`	`--`
formProps	传递给表单的参数, 请参考SchemaForm组件的api	`SettingFormProps`	`--`
confirmOnClose	关闭弹窗时, 如果表单项发生了改动会弹出确认框	`boolean`	`true`

InnerRef

参数	说明	类型	默认值
openModal	用于打开弹窗; formType 可用于在 onFinish 的时候判断表单类型; `innerRef.current?.openModal('edit', {name: 'jack', age: 18})`	`(formType?: 'new' \| 'edit' \| 'read', initialValues?: any) => void`	-
formType	当前的表单类型	`'new' \| 'edit' \| 'read'`	`new`
data	可以存储表单中的额外数据	`Record<string, any>`	`{}`
setData	存入数据; setData 和 react 的 setState 一样, 只需要传入关心的字段就可以, 不会覆盖其它的字段.	`(Record<string, any>) => void`	`--`

TABLE OF CONTENTS

TABLE OF CONTENTS

ModalForm - 弹窗表单

一个基本的弹窗表单

非受控模式 (推荐)

多列排布

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

表单类型和表单初始值

onOpen 请求数据后回显

表单项显示隐藏

onFinish

⭐ 数据处理和收集 - 约定式

利用 innerRef 存储额外信息

API

ModalForm

InnerRef

ModalForm - 弹窗表单

一个基本的弹窗表单

非受控模式 (推荐)

多列排布

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

表单类型和表单初始值

onOpen 请求数据后回显

表单项显示隐藏

onFinish

⭐ 数据处理和收集 - 约定式

利用 innerRef 存储额外信息

API

ModalForm

InnerRef

TABLE OF CONTENTS

TABLE OF CONTENTS

ModalForm - 弹窗表单

一个基本的弹窗表单

非受控模式 (推荐)

多列排布

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

表单类型和表单初始值

onOpen 请求数据后回显

表单项显示隐藏

onFinish

⭐ 数据处理和收集 - 约定式

利用 innerRef 存储额外信息

API

ModalForm

InnerRef

透传给 Modal 的 API 可参考Antd Modal 文档

ModalForm - 弹窗表单

一个基本的弹窗表单

非受控模式 (推荐)

多列排布

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

表单类型和表单初始值

onOpen 请求数据后回显

表单项显示隐藏

onFinish

⭐ 数据处理和收集 - 约定式

利用 innerRef 存储额外信息

API

ModalForm

InnerRef

透传给 Modal 的 API 可参考Antd Modal 文档