antd动态增加form表单

在Ant Design（antd）中，动态添加Form表单通常涉及到React Hooks和Array方法，特别是`useState`、`useRef`以及`array.push()`.下面是一个简单的步骤说明：

1. 首先，你需要创建一个状态数组来存储每个表单的状态，例如字段的值和验证状态：

const [forms, setForms] = useState([{ key: '', values: {}, dirty: false, errors: {} }]);

2. 创建一个新的表单项可以使用`push`方法添加一个新的对象到数组中：

function addFormItem() {
  const newKey = Math.random().toString(36).substring(7);
  setForms([...forms, { key: newKey, values: {}, dirty: false, errors: {} }]);
}

3. 当需要处理新表单的数据时，可以给表单项一个唯一标识（如`key`），并提供一个删除功能，比如删除某个表单项：

function deleteFormItem(key) {
  setForms(forms.filter(form => form.key !== key));
}

// 渲染部分
{forms.map((form, index) => (
  <Form.Item key={form.key}>
    {/* ...表单控件 */}
  </Form.Item>
))}
<button onClick={addFormItem}>新增表单</button>
<button onClick={() => deleteFormItem(forms.length - 1)}>删除最后一项</button>