如何使用AntDesign的动态表单功能

AntDesign提供了Form组件，可以用于构建动态表单。下面是一个简单的示例代码，演示如何使用AntDesign的动态表单功能：

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';

const DynamicForm = () => {
  const [fields, setFields] = useState([]);

  const addField = () => {
    const newFields = [...fields, { name: `field${fields.length + 1}`, value: '' }];
    setFields(newFields);
  };

  const removeField = (index) => {
    const newFields = fields.filter((field, i) => i !== index);
    setFields(newFields);
  };

  return (
    <Form>
      {fields.map((field, index) => (
        <Form.Item key={index}>
          <Input
            value={field.value}
            onChange={(e) => {
              const newFields = [...fields];
              newFields[index].value = e.target.value;
              setFields(newFields);
            }}
          />
          <Button onClick={() => removeField(index)}>Remove</Button>
        </Form.Item>
      ))}
      <Button onClick={addField}>Add Field</Button>
    </Form>
  );
};

export default DynamicForm;

在这个示例中，我们使用useState来管理表单字段的状态。通过调用addField函数，可以在表单中动态添加新的字段；通过调用removeField函数，可以移除指定索引的字段。

通过这种方式，我们可以轻松地实现动态表单功能，并根据需求扩展和修改表单的结构。AntDesign的Form组件提供了丰富的功能和样式，可以帮助我们快速构建出漂亮且功能强大的表单。