### 实现 Modal
Form 处理多条
记录
为了实现在 Ant Design 的 `Modal` 组件中处理多个表单
记录，可以采用如下策略：
#### 创建独立的
Form 表单实例
对于每一个需要展示不同数据的模态框，创建单独的 `
Form` 实例来管理各自的状态。通过 `
Form.use
Form()` 方法获取对应的 `
form` 对象，并将其传递给子组件中的 `<
Form>` 标签。
```jsx
import React, { useState, useEffect } from 'react';
import { Button, Modal,
Form, Input } from '
antd';
const Customized
Form = ({ visible, onCancel, onOk, initialValues })
=> {
const [
form]
= Form.use
Form();
useEffect(()
=> {
if (visible && initialValues) {
form.resetFields();
form.setFieldsValue(initialValues);
}
}, [visible, initialValues]);
return (
<Modal
title
="Basic Modal"
visible
={visible}
okText
="Submit"
cancelText
="Cancel"
onCancel
={()
=> {
form.resetFields();
onCancel();
}}
onOk
={()
=> {
form.validateFields()
.then(values
=> {
console
.log('Received values of
form:', values);
onOk();
});
}}
>
<
Form form={
form} layout
="vertical">
<
Form.Item name
="name" label
="Name" rules
={[{ required: true }]}>
<Input />
</
Form.Item>
{/* Add more fields as needed */}
</
Form>
</Modal>
);
};
```
此代码片段展示了如何初始化并重置表单项以适应新的输入值[^1]。
#### 动态渲染多个 Modal 和
Form
当面对多个按钮触发相同类型的对话框时，可以通过状态变量控制哪个具体的
记录被编辑或查看。利用数组存储各个待操作的数据项，在点击相应按钮时更新当前选中的索引位置以及显示/隐藏标志位。
```jsx
function App() {
const records
= [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
// More items
...
];
const [selectedRecordIndex, setSelectedRecordIndex]
= useState(null);
const [isModalVisible, setIsModalVisible]
= useState(false);
const handleEditClick
= index
=> ()
=> {
setSelectedRecordIndex(index);
setIsModalVisible(true);
};
const handleModalClose
= ()
=> {
setIsModalVisible(false);
};
const handleSubmit
= async ()
=> {
await new Promise(resolve
=> setTimeout(resolve, 1000)); // Simulate API call delay
.
setIsModalVisible(false);
};
return (
<>
<ul style
={{ listStyleType: 'none', paddingInlineStart: 0 }}>
{records
.map((record, idx)
=> (
<li key
={idx}>
<Button onClick
={handleEditClick(idx)}>Edit</Button> {record
.name}
</li>
))}
</ul>
<Customized
Form
visible
={isModalVisible}
onCancel
={handleModalClose}
onOk
={handleSubmit}
initialValues
={records[selectedRecordIndex]}
/>
</>
);
}
```
上述例子说明了怎样根据不同的上下文条件动态调整模态窗口内的初始字段值[^3]。
#### 清除旧数据防止残留影响新录入的信息
每当关闭模态框之前都应该调用 `resetFields()` 来清空之前的填写内容，从而确保每次打开都是干净的状态。这一步骤有助于避免因缓存而导致意外行为的发生[^2]。
本文讲述了在使用antd库的form组件时遇到的'getFieldDecorator'未定义错误，通过排查发现是由于form组件未正确导入。解决方法是确保在导出组件时应用了form.create()方法。
最低0.47元/天 解锁文章
扫一扫
4627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
