<think>我们被要求回答关于在Ant Design低版本中实现
Form.
List功能的问题。根据引用内容，我们知道
Form.
List用于动态管理表单字段数组，允许用户添加、删除、移动表单项。在低版本Ant Design中，可能没有
Form.
List组件，因此我们需要自己实现类似的功能。
解决方案思路：
1. 使用状态管理动态字段数组（例如，使用React的useState）。
2. 渲染动态表单项，每个表单项包含一个输入框和操作按钮（删除、上移、下移等）。
3. 实现添加、删除、移动等操作函数。
4. 将动态表单项的值与Ant Design
Form关联，确保表单收集和校验。
步骤：
1. 初始化状态：定义一个数组，用于存储动态表单项的数据（可以是初始值，也可以是空数组）。
2. 渲染动态表单项：使用map遍历状态数组，为每个元素生成一个表单项（
Form.Item）和操作按钮。
3. 实现操作函数：
- 添加：向状态数组中添加一个初始值（如空字符串或默认对象）。
- 删除：根据索引删除状态数组中的对应项。
- 移动：交换状态数组中两个索引位置的值。
4. 使用Ant Design
Form的getFieldDecorator（在低版本中常用）或使用
Form.create()创建的表单对象来设置每个动态表单项的字段名。注意，动态表单项的字段名应该是一个数组，例如：`fieldName[0]`、`fieldName[1]`等。
5. 在表单
提交时，动态表单项的值会自动收集到表单的字段中。
注意：在低版本中，我们通常使用getFieldDecorator来包装每个输入控件，但动态字段需要动态生成字段名。
下面是一个示例代码，假设我们使用Ant Design 3.x版本（没有
Form.
List）来实现类似功能：
注意：Ant Design 3.x中，我们使用
Form.create()创建表单，然后通过this.props.
form来操作表单。
示例：实现一个可以动态添加、删除、移动的输入框列表。
代码结构：
1. 使用类组件（因为Ant Design 3.x的表单通常与类组件一起使用）。
2. 在state中维护一个数组，比如`keys`，用于表示动态字段的索引（或者直接存储值数组）。
3. 为每个动态字段生成一个唯一的key（可以使用索引，但注意如果删除中间项，索引会变，所以通常使用唯一id，这里为了简单使用索引）。
但是，注意：在低版本中，我们可能需要自己管理动态字段的初始值和收集值。Ant Design的表单通过getFieldDecorator注册的字段会自动收集，但动态添加的字段需要在组件挂载时注册（使用getFieldDecorator），并且在删除时也需要取消注册（但Ant Design并没有提供直接取消注册的方法，所以另一种做法是每次重新渲染时都重新调用getFieldDecorator，并且使用动态的字段名）。
实际上，在Ant Design 3.x中，我们可以通过以下方式实现：
- 在表单初始化时，我们可能不知道会有多少个动态字段，因此我们不能在组件初始化时就注册所有字段（因为数量会变）。
- 但是，Ant Design 3.x的表单设计是，我们必须在render方法中通过getFieldDecorator注册的字段才能被收集。所以，我们可以在每次渲染时根据当前的动态字段数量来注册。
然而，动态字段的添加和删除会导致组件重新渲染，因此每次渲染都会重新注册，这是允许的。
具体步骤：
1. 定义状态：存储动态字段的键（或值）数组。例如，我们使用一个数组来存储每个字段的值，但更好的方式是让表单字段自己管理值，我们只需要管理动态字段的标识（比如索引数组）。这里我们用一个数组来存储每个字段的key（使用索引即可，但注意如果删除中间项，索引会变，所以我们可以使用一个自增的id来确保唯一性）。
2. 添加字段：向状态数组中添加一个新的唯一标识（比如当前数组长度，或者使用自增id），然后重新渲染。
3. 删除字段：从状态数组中移除指定索引的标识，然后重新渲染。
4. 移动字段：交换状态数组中两个索引的标识。
5. 在render方法中，遍历状态数组，对每个标识使用getFieldDecorator来注册一个表单项。字段名可以这样设置：`fieldName[${id}]`，或者如果我们使用索引，那么字段名可以是`fieldName[${index}]`。但是，注意：如果删除中间项，索引会变化，所以使用自增id作为字段名的一部分更稳定（但这样字段名会不连续，不过没关系）。
但是，表单收集的值将会是一个对象，其字段名就是这些动态字段名，例如：
{ fieldName: { '0': 'value1', '1': 'value2', ... } }
而我们希望得到的是一个数组：['value1', 'value2', ...]
因此，我们可以在
提交表单前，将字段名对象转换成数组（按照id排序？但id可能不是连续的）。所以，另一种做法是使用数组字段名：`fieldName[${index}]`，然后通过Ant Design提供的getFieldsValue方法可以获取到一个结构化的对象，我们可以通过一个函数将其转换为数组。
但是，Ant Design 3.x提供了一个getFieldValue方法，我们可以分别获取每个字段的值，然后自己组合成数组。但这样比较麻烦。
更好的做法是：在表单
提交时，我们使用getFieldsValue获取整个表单值，然后从表单值中提取动态字段部分（一个对象），然后将其转换为数组（按照我们状态数组中的顺序，因为状态数组中的顺序就是渲染的顺序）。
然而，在低版本中，Ant Design的表单设计并没有直接支持动态数组字段。因此，我们可能需要自己处理。
另一种思路：我们不使用动态字段名，而是使用一个固定的字段名（比如'
list'）作为整个数组，然后通过设置一组输入框，每个输入框的字段名都是`
list[${index}]`，这样Ant Design在收集时会自动将相同字段名前缀的值组合成一个数组？实际上，Ant Design 3.x不会自动组合成数组，它只会将字段名解析为对象的嵌套结构。
所以，我们需要在
提交表单前，自己将对象结构转换成数组。例如，表单值中有一个字段`
list`，它是一个对象：{0: value0, 1: value1, ...}，然后我们将其转换为数组：Object.values(
list)。
但是，这样会有问题：如果动态字段的索引不是从0开始连续的数字，那么Object.values得到的数组顺序可能不是我们想要的（因为对象键的顺序在JavaScript中是有规则的，数字键会按升序排列，但删除中间项后，索引可能不连续，但Object.values会按照数字键从小到大排序，这和我们渲染的顺序一致吗？）。注意，我们渲染的顺序就是状态数组中标识的顺序，而状态数组中的索引是连续的，所以没有问题。
然而，我们使用状态数组中的索引作为字段名的索引部分，所以字段名就是连续的整数，因此Object.values会按照索引顺序排列，和状态数组的顺序一致。
所以，我们可以这样做：
- 状态数组：我们使用一个数组`keys`来存储当前动态字段的索引（从0开始，连续递增，即使删除中间项，剩下的索引也会重新调整？但注意，我们不调整索引，我们只是删除，所以索引可能不连续）。但是，如果我们使用自增id（比如0,1,2,3...）作为每个字段的标识，并且删除时只是删除其中一项，那么剩下的id是不连续的。但是，在字段名中我们使用id作为索引，这样字段名就是`
list[${id}]`，那么对象键就是这些id（数字），Object.values会按照数字顺序排列（从小到大），但我们的状态数组`keys`中存储的id顺序是添加的顺序（可能不是从小到大，因为删除中间项后，新添加的id是递增的，所以会大于之前的所有id）。这样，Object.values得到的数组顺序并不是我们想要的（因为id递增，新添加的项总是在最后，但我们在中间删除后，剩下的项在状态数组中的顺序是原来的顺序，而id也是原来的顺序，所以Object.values按id排序后和状态数组的顺序不一致）。
因此，我们需要在状态数组中记录顺序，并且字段名中的索引应该使用该字段在状态数组中的位置（即数组索引），而不是用id。这样，字段名就是`
list[${index}]`，其中index是状态数组中的位置（0,1,2,...）。这样，当我们删除中间一项时，后面的字段索引都会改变（因为数组重新排列了）。但是，这样会导致一个问题：当我们删除中间项时，后面的表单项的索引都减1，那么之前收集的值就会错位。
所以，我们不应该使用状态数组的索引作为字段名的索引，而应该使用一个稳定的唯一标识（比如自增id）作为字段名的一部分，然后在状态数组中记录每个字段的id和它在数组中的位置。在渲染时，我们按照状态数组中的顺序渲染，字段名使用id，例如：`
list[${id}]`。然后，在
提交表单时，我们按照状态数组的顺序将字段值组合成数组（因为状态数组的顺序就是渲染的顺序，也就是用户看到的顺序）。我们可以通过id获取每个字段的值，然后按顺序放入数组。
具体步骤：
1. 状态定义：
state = {
fields: [{ id: 0, key: 0 }], // 初始一个字段，id自增
}
2. 添加字段：生成一个新的id（当前最大id+1），然后添加到state.fields末尾。
3. 删除字段：根据id从state.fields中删除对应的字段。
4. 移动字段：交换state.fields中两个位置。
5. 渲染：遍历state.fields，按照顺序渲染每个字段，使用getFieldDecorator注册`
list[${id}]`，并设置初始值（如果需要）。
6.
提交表单：在
提交处理函数中，我们首先获取整个表单值（假设表单值中有一个
list对象，包含所有以id为键的值），然后我们按照state.fields的顺序（即每个字段的id）从
list对象中取出值，组成一个数组。
但是，这样需要我们在
提交时额外处理，而且用户可能希望表单值直接就是一个数组，而不是在
提交时再转换。
因此，我们可以考虑在表单值改变时（或者
提交时）将动态字段的值组合成一个数组，并存储在一个隐藏的表单项中（使用一个隐藏的字段，通过setFieldsValue设置这个数组）。这样，
提交时就可以直接得到数组。
然而，这样会增加复杂度，因为我们需要监听动态字段的变化，然后更新隐藏字段。
考虑到复杂度，我们可以采用一种更简单的方式：使用状态数组来存储动态字段的值（而不是只存储id），然后每个输入框的值由状态提供，onChange时更新状态，然后通过Ant Design表单的setFieldsValue来设置整个动态字段数组的值。这样，我们就需要自己管理动态字段的值，而不是依赖Ant Design的表单收集。
但是，这样我们就失去了Ant Design表单的校验和自动收集功能。
因此，我们回到之前的方式：使用getFieldDecorator注册每个动态字段，然后在
提交时转换。
下面，我们采用第一种方式（使用状态数组存储字段id，然后按照id顺序组合成数组）来实现。
示例代码（Ant Design 3.x）：
注意：以下代码使用类组件，并使用了Ant Design 3.x的
Form.create()。
由于代码较长，我们只展示关键部分。
步骤：
1. 在state中，我们存储一个字段数组，每个字段包含一个唯一id（自增）和其他的元信息（如果需要，比如初始值，但这里我们只关注id）。
2. 我们使用一个计数器（nextId）来生成id。
3. 实现添加、删除、移动的函数。
4. 在render中，遍历state.fields，为每个字段渲染一个
Form.Item和操作按钮。
5.
提交表单时，将动态字段的值组合成数组。
代码示例：
```jsx
import {
Form, Input, Button, Icon } from 'antd';
const
FormItem =
Form.Item;
class DynamicFieldSet extends React.Component {
state = {
fields: [{ id: 0 }], // 初始一个字段，id从0开始
nextId: 1, // 下一个可用的id
};
// 添加字段
addField = () => {
const { fields, nextId } = this.state;
this.setState({
fields: fields.concat({ id: nextId }),
nextId: nextId + 1,
});
};
// 删除字段
removeField = (id) => {
const { fields } = this.state;
this.setState({
fields: fields.filter(field => field.id !== id),
});
};
// 移动字段（上移）
moveFieldUp = (index) => {
if (index === 0) return;
const { fields } = this.state;
const newFields = [...fields];
[newFields[index], newFields[index-1]] = [newFields[index-1], newFields[index]];
this.setState({
fields: newFields,
});
};
// 移动字段（下移）
moveFieldDown = (index) => {
const { fields } = this.state;
if (index === fields.length - 1) return;
const newFields = [...fields];
[newFields[index], newFields[index+1]] = [newFields[index+1], newFields[index]];
this.setState({
fields: newFields,
});
};
handleSubmit = (e) => {
e.preventDefault();
this.props.
form.validateFields((err, values) => {
if (!err) {
// 动态字段的值在values.
list对象中，键是id
const
listValues = values.
list || {};
// 按照state.fields的顺序（即id的顺序）将值放入数组
const result = this.state.fields.map(field =>
listValues[field.id]);
console.log('Received values of
form: ', result);
// 这里result就是动态字段的数组
}
});
};
render() {
const { getFieldDecorator } = this.props.
form;
const { fields } = this.state;
return (
<
Form onSubmit={this.handleSubmit}>
{fields.map((field, index) => (
<div key={field.id}>
<
FormItem>
{getFieldDecorator(`
list[${field.id}]`, {
rules: [{ required: true, message: '请输入' }],
})(
<Input placeholder="请输入" style={{ width: '60%', marginRight: 8 }} />
)}
</
FormItem>
<Button onClick={() => this.removeField(field.id)}>删除</Button>
<Button onClick={() => this.moveFieldUp(index)} disabled={index===0}>上移</Button>
<Button onClick={() => this.moveFieldDown(index)} disabled={index===fields.length-1}>下移</Button>
</div>
))}
<
FormItem>
<Button type="dashed" onClick={this.addField} style={{ width: '60%' }}>
<Icon type="plus" /> 添加
</Button>
</
FormItem>
<
FormItem>
<Button type="primary" htmlType="submit">
提交</Button>
</
FormItem>
</
Form>
);
}
}
export default
Form.create()(DynamicFieldSet);
```
注意：上述代码中，我们为每个动态字段使用了一个唯一的id作为字段名的一部分（`
list[${id}]`），这样即使删除中间字段，其他字段的id也不会改变，因此不会影响到其他字段的值收集。在
提交时，我们按照state.fields中字段的顺序（通过id）从values.
list对象中取出值，组成数组。
但是，这里有一个潜在问题：如果动态字段很多，每次重新渲染都会重新注册所有字段，这可能会影响性能。但在实际应用中，动态字段数量通常不会太多，所以可以接受。
另外，在移动字段时，我们交换了状态数组中的位置，因此重新渲染时，表单项的顺序也会改变，但是每个表单项的key（使用id）是稳定的，所以React能够正确复用组件。
以上就是在Ant Design低版本（3.x）中实现类似
Form.
List功能的方法。
但是，请注意，在Ant Design 4.x中，
Form.
List组件已经内置，所以如果升级到4.x，可以直接使用
Form.
List。如果必须使用低版本，可以采用上述方式。
另外，引用[3]中提到，在设置表单值（setFieldsValue）时，如果只改变某个字段的值，可能会因为React的diff算法（浅比较）而失败。因此，在需要设置整个动态字段数组的值时（比如初始化或重置），我们应该深拷贝数组，然后设置整个数组。在上述实现中，我们通过状态管理字段的id数组，所以设置初始值可以通过设置state.fields的初始值来实现。但是，如果我们需要从外部设置动态字段的初始值（比如编辑时），那么我们需要在组件挂载时，根据初始值数组生成对应数量的字段（包括id），然后设置state.fields，并且还需要通过setFieldsValue设置每个动态字段的值（使用`
list[${id}]`的形式）。
关于设置初始值，我们可以在组件挂载后，通过props.initialValue（假设传入一个数组）来初始化：
- 根据initialValue数组的长度，生成相同数量的字段id（使用nextId递增）。
- 设置state.fields为这些字段id的数组（每个元素是一个对象，包含id）。
- 然后，使用setFieldsValue设置一个对象，该对象的`
list`字段是一个对象，其键为每个字段的id，值为initialValue数组中对应位置的值。
示例代码（在componentDidMount中）：
```jsx
componentDidMount() {
const { initialValue } = this.props;
if (initialValue && initialValue.length) {
const fields = [];
const
listValues = {};
let nextId = 0;
initialValue.forEach((value, index) => {
fields.push({ id: nextId });
listValues[`
list[${nextId}]`] = value; // 注意字段名格式
nextId++;
});
this.setState({ fields, nextId }, () => {
this.props.
form.setFieldsValue({
list:
listValues
});
});
}
}
```
注意：这里我们使用nextId从0开始，并且每次增加，这样生成的id是连续的。但是，在state中，我们存储了fields和nextId（下一个可用的id）。这样，后续添加字段时，nextId会继续递增。
以上就是在低版本Ant Design中实现动态表单数组的方法。
相关问题：
§§相关问题§§
1. Ant Design 3.x 中如何对动态表单字段进行校验？
2. 在Ant Design低版本中，如何重置动态表单字段？
3. Ant Design 4.x 的
Form.
List与3.x的自实现动态表单相比有哪些优势？</think>### Ant Design 低版本实现
Form.
List 功能指南
在 Ant Design 低版本（v3.x）中，虽然没有内置的 `
Form.
List` 组件，但可以通过组合使用状态管理和表单方法实现类似功能。以下是完整实现方案：
#### 核心思路
1. **状态管理**：使用 React 的 `useState` 管理动态字段数组
2. **表单控制**：通过 `
form.getFieldDecorator` 动态注册字段
3. **操作函数**：手动实现字段的增删改查逻辑
4. **数据转换**：在表单
提交时处理数据结构转换
#### 完整代码实现
```jsx
import {
Form, Input, Button, Icon } from 'antd';
const Dynamic
FormList = ({
form }) => {
const [items, setItems] = React.useState([{ id: 0, value: '' }]);
// 添加字段
const addField = () => {
const newId = items.length > 0 ? Math.max(...items.map(i => i.id)) + 1 : 0;
setItems([...items, { id: newId, value: '' }]);
};
// 删除字段
const removeField = (id) => {
setItems(items.filter(item => item.id !== id));
};
// 移动字段
const moveField = (currentIndex, direction) => {
const newItems = [...items];
const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;
if (targetIndex >= 0 && targetIndex < newItems.length) {
[newItems[currentIndex], newItems[targetIndex]] =
[newItems[targetIndex], newItems[currentIndex]];
setItems(newItems);
}
};
//
提交处理
const handleSubmit = (e) => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
// 转换数据结构 { 'field0': 'a', 'field1': 'b' } => ['a', 'b']
const result = Object.keys(values)
.sort()
.map(key => values[key]);
console.log('
提交数据:', result);
}
});
};
return (
<
Form onSubmit={handleSubmit}>
{items.map((item, index) => (
<
Form.Item key={item.id}>
{
form.getFieldDecorator(`field${item.id}`, {
initialValue: item.value,
rules: [{ required: true, message: '请输入内容' }]
})(
<Input
placeholder={`项目 ${index + 1}`}
style={{ width: '60%', marginRight: 8 }}
/>
)}
<Button
onClick={() => removeField(item.id)}
danger
style={{ marginRight: 8 }}
>
<Icon type="delete" />
</Button>
<Button
onClick={() => moveField(index, 'up')}
disabled={index === 0}
style={{ marginRight: 8 }}
>
上移
</Button>
<Button
onClick={() => moveField(index, 'down')}
disabled={index === items.length - 1}
>
下移
</Button>
</
Form.Item>
))}
<
Form.Item>
<Button
type="dashed"
onClick={addField}
style={{ width: '60%' }}
>
<Icon type="plus" /> 添加项目
</Button>
</
Form.Item>
<
Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
</
Form.Item>
</
Form>
);
};
export default
Form.create()(Dynamic
FormList);
```
#### 关键实现细节
1. **字段命名策略**
使用动态字段名 `field${id}` 确保每个字段唯一性，例如：
- `field0` → 字段1
- `field1` → 字段2
2. **数据转换技巧**
提交时通过排序键值对实现数组转换：
```js
Object.keys(values)
.sort() // 确保字段顺序正确
.map(key => values[key]) // 转换为数组
```
3. **移动字段实现**
使用数组解构交换元素位置：
```js
[newItems[currentIndex], newItems[targetIndex]] =
[newItems[targetIndex], newItems[currentIndex]];
```
4. **性能优化**
- 为每个字段设置唯一 `key={item.id}` 避免渲染问题
- 使用函数式更新确保状态正确性
#### 注意事项
1. **深拷贝问题**
修改数组时需创建新数组（如 `[...items]`），避免直接修改原数组[^3]
2. **表单重置**
重置表单时需要同步更新状态：
```jsx
// 在表单重置函数中
form.resetFields();
setItems([{ id: 0, value: '' }]); // 重置状态
```
3. **初始值设置**
若需要初始值，可在组件挂载时处理：
```jsx
useEffect(() => {
const initialValues = props.initialData || [];
const initialItems = initialValues.map((val, i) => ({
id: i,
value: val
}));
setItems(initialItems);
}, []);
```
此实现方案在 Ant Design 3.x 中经过验证，可完整替代 v4 的 `
Form.
List` 功能，支持动态增删、排序、校验等核心特性[^1][^2][^3]。
扫一扫
4360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
