在 Ant Design Pro 中使用 `Pro
Form` 组件处理
嵌套表单的赋值时，关键在于理解如何构造
嵌套结构的数据，
并通过 `
form.setFieldsValue` 方法进行赋值。由于表单
嵌套层级和字段名（name）是动态的，需要构造一个能够处理任意层级
嵌套的赋值函数。
### 动态设置
嵌套表单项的值
可以使用递归或循环的方式构建一个函数，该函数接收字段名数组 `nameArr` 和对应的值对象 `innerValue`，
并返回一个
嵌套结构的对象，最终通过 `
form.setFieldsValue` 设置到表单中。
```javascript
const nameArr = ['user', 'info', 'gender']; //
嵌套字段名数组
const innerValue = 'male';
const itemObj = (nameArr, innerValue) => {
let valueObj = {};
for (let i = nameArr.length - 1; i >= 0; i--) {
valueObj = i === nameArr.length - 1 ? { [nameArr[i]]: innerValue } : { [nameArr[i]]: { ...valueObj } };
}
return valueObj;
};
// 调用赋值函数
const onFill = () => {
form.setFieldsValue(itemObj(nameArr, innerValue));
};
```
### 使用 `Pro
Form` 处理动态
嵌套表单
当涉及到 `Pro
Form` 和
嵌套结构时，推荐使用 `
Form.Item` 的 `name` 属性来指定
嵌套路径。例如，如果需要设置 `user.info.gender` 的值，可以直接在 `
Form.Item` 上设置 `name={['user', 'info', 'gender']}`。
```jsx
import { Pro
Form } from '@ant-design/pro-components';
export default () => {
const [
form] = Pro
Form.use
Form();
const handleFill = () => {
const nameArr = ['user', 'info', 'note'];
const innerValue = { text: 'Hello world!' };
const valueObj = itemObj(nameArr, innerValue);
form.setFieldsValue(valueObj);
};
return (
<Pro
Form form={
form}>
<Pro
Form.Item label="Note" name={['user', 'info', 'note']} fieldProps={{ text: '' }}>
<Input />
</Pro
Form.Item>
<Button onClick={handleFill}>填充表单</Button>
</Pro
Form>
);
};
```
### 处理数组
嵌套
对于
嵌套数组的情况，需要注意 `
Form.List` 的使用方式，确保在 `name` 前面使用 `...field` 或 `...list` 来展开字段信息，以便正确渲染表单项。在赋值时，由于数组是引用类型，建议使用 `getFieldsValue` 获取当前表单值，
并通过数组的变异方法（如 `splice`）修改数组内容。
```jsx
import {
Form, Button } from '
antd';
export default () => {
const [
form] =
Form.use
Form();
const handleAdd = () => {
const list =
form.getFieldsValue(['users']).users || [];
list.push({ name: '', age: '' });
form.setFieldsValue({ users: list });
};
return (
<
Form form={
form} layout="vertical">
<
Form.List name="users">
{(fields) =>
fields.map(({ key, name, ...restField }) => (
<div key={key}>
<
Form.Item {...restField} label="Name" name={[name, 'name']} rules={[{ required: true }]}>
<Input />
</
Form.Item>
<
Form.Item {...restField} label="Age" name={[name, 'age']} rules={[{ required: true }]}>
<InputNumber />
</
Form.Item>
</div>
))
}
</
Form.List>
<Button onClick={handleAdd}>添加用户</Button>
</
Form>
);
};
```
### 表单赋值注意事项
- **动态赋值**：使用 `
form.setFieldsValue` 时，确保传递的值对象结构与表单字段的 `name` 结构一致。
- **初始值设置**：对于 `
Modal` 中的表单，应使用 `initialValue` 或在 `useEffect` 中设置初始值，以确保表单在打开时显示正确的数据。
- **引用类型处理**：当处理数组或对象时，注意使用不可变数据模式，避免直接修改原始数据[^2]。
###
本文介绍了如何在Ant Design的Modal组件中嵌套Form，并利用React.createRef进行表单提交。适用版本为Antd4.0和5.0。通过在Modal的确定按钮点击事件中调用Form的submit方法，实现美观的表单提交效果。
最低0.47元/天 解锁文章
扫一扫
1万+
到【灌水乐园】发言
