antd解决form不能套form的问题

在 Ant Design 中，一个表单（Form）只能有一个包含所有表单项的 Form.Item，因此无法直接嵌套多个 Form。但是，可以通过使用表单域组（Form.List）来实现套嵌表单。

具体实现步骤如下：

1. 在外层表单（父表单）中使用 Form.List 包裹需要嵌套的表单项，例如：

<Form.List name="nestedForm">
  {(fields, { add, remove }) => {
    return (
      <>
        {fields.map((field, index) => (
          <Form.Item key={field.key}>
            <Input 
              name={[field.name, 'inputName']} 
              fieldKey={[field.fieldKey, 'inputKey']} 
              placeholder="Input something"
            />
            <Button onClick={() => remove(field.name)}>Remove</Button>
          </Form.Item>
        ))}
        <Button onClick={() => add()}>Add</Button>
      </>
    );
  }}
</Form.List>

2. 在嵌套的表单项（子表单）中使用 Field 包裹需要收集数据的表单项，例如：

<Form.List name={['nestedForm', index, 'subNestedForm']}>
  {(fields, { add, remove }) => {
    return (
      <>
        {fields.map((field, index) => (
          <Form.Item key={field.key}>
            <Input 
              name={[field.name, 'inputName']} 
              fieldKey={[field.fieldKey, 'inputKey']} 
              placeholder="Input something"
            />
            <Button onClick={() => remove(field.name)}>Remove</Button>
          </Form.Item>
        ))}
        <Button onClick={() => add()}>Add</Button>
      </>
    );
  }}
</Form.List>

在上述代码中，`name` 属性设置为数组形式，使用 `[]` 包裹每级表单项的名称，例如 `'nestedForm'` 表示父表单中的嵌套表单，`'subNestedForm'` 表示子表单中的嵌套表单。使用 `index` 变量表示当前表单项的下标。

通过以上方式，就可以在 Ant Design 中实现表单的嵌套和收集数据。