如何一次性清除Ant Design Form中所有动态生成的元素

要实现一次性移除所有动态生成的Form.List元素，且不直接操作DOM，最佳方式是通过Ant Design Form的官方API操作表单数据，以下两种方案均可行：

方案一：调用Form.List的remove方法批量移除 #

Form.List返回的remove方法可接收字段索引作为参数，遍历所有现有字段的索引逐个移除即可：

// 在Form.List的回调内定义批量移除函数
const removeAllFields = () => {
  fields.forEach((_, index) => {
    remove(index);
  });
};

方案二：通过Form实例的setFieldsValue直接清空对应字段 #

Form.List的数据源对应表单中name="filterattribute"的数组，直接将该字段设为空数组，Form会自动同步渲染状态：

// 利用form实例实现清空
const clearAllDynamicFields = () => {
  form.setFieldsValue({
    filterattribute: []
  });
};

完整修改后的代码示例 #

添加一个"清空所有元素"按钮来触发操作：

import React from 'react';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { Button, Form } from 'antd';

const App = () => {
  const [form] = Form.useForm();

  // 采用方案二实现清空逻辑
  const clearAllFields = () => {
    form.setFieldsValue({ filterattribute: [] });
  };

  return (
    <Form
      form={form}
      name="dynamic_form_nest_item"
      autoComplete="off"
      preserve={false}
    >
      <Form.List name="filterattribute">
        {(fields, { add, remove }) => (
          <div>
            <div style={{ display: 'flex', gap: 16 }}>
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => add()}
                  block
                  icon={<PlusOutlined />}
                  size="large"
                >
                  添加元素
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="default"
                  onClick={clearAllFields}
                  block
                  size="large"
                >
                  清空所有元素
                </Button>
              </Form.Item>
            </div>
            <div className="greybg" style={{ padding: '6px 0px 8px' }}>
              {fields.map(({ key, name, ...restField }) => (
                <div
                  key={key}
                  style={{
                    display: 'flex',
                    marginTop: 0,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <MinusOutlined
                    style={{ margin: '0 15px 0 0', cursor: 'pointer' }}
                    onClick={() => remove(name)}
                  />
                  元素
                </div>
              ))}
            </div>
          </div>
        )}
      </Form.List>
    </Form>
  );
};
export default App;

方案说明 #

• 两种方案均遵循Ant Design Form的受控设计，通过操作数据而非DOM更新UI，避免了直接操作DOM带来的状态不一致问题。
• 方案二更简洁高效，直接修改表单数据源，Form会自动处理UI更新，无需遍历移除每个字段。

内容的提问来源于stack exchange，提问作者Tobi