antdesignpro ModalForm怎么用
时间: 2023-07-03 13:04:51 浏览: 162
Ant Design Pro 中的 ModalForm 组件可以用于创建一个模态框,其中包含一个表单。它可以用于快速创建一些简单的表单交互,例如添加或编辑数据。
以下是如何使用 ModalForm 的基本步骤:
- 引入 ModalForm 组件:
import { ModalForm } from '@ant-design/pro-form';
- 在需要使用 ModalForm 的组件中,定义表单项:
const formItems = [
{
label: '名称',
name: 'name',
rules: [
{ required: true, message: '名称不能为空' },
],
},
{
label: '描述',
name: 'description',
},
];
- 在需要使用 ModalForm 的组件中,定义提交表单时的处理函数:
const handleSubmit = async (values) => {
// 处理表单提交逻辑
console.log(values);
};
- 在需要使用 ModalForm 的组件中,渲染 ModalForm 组件:
<ModalForm
title="添加数据"
visible={visible}
onVisibleChange={setVisible}
onFinish={handleSubmit}
modalProps={{
destroyOnClose: true,
}}
>
{formItems.map((item) => (
<FormItem {...item} />
))}
</ModalForm>
在上面的代码中,我们传递了 ModalForm 的一些属性:
title
:模态框的标题visible
:模态框是否可见onVisibleChange
:模态框可见状态发生改变时的回调函数onFinish
:表单提交成功后的回调函数modalProps
:传递给 Modal 组件的属性
我们还将表单项数组中的每个表单项作为 props 传递给了 FormItem
组件,用于渲染表单项。
以上是 ModalForm 的基本使用方法。你可以根据自己的需求,进一步配置 ModalForm 组件的属性和表单项。
阅读全文
相关推荐

















