如何使用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組件提供了豐富的功能和樣式，可以幫助我們快速構建出漂亮且功能強大的表單。