为antd动态字段中的每个部分创建单独的提交按钮

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

const DynamicForm = () => {
  const [form] = Form.useForm();
  const [fields, setFields] = useState([{ name: ['field1'], value: '' }]);

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

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

  const handleSubmit = (values, index) => {
    console.log(`Submitted values for field${index + 1}:`, values);
    // 这里可以添加具体的提交逻辑，比如调用API
  };

  return (
    <Form form={form}>
      {fields.map((field, index) => (
        <Space key={field.name} align="baseline">
          <Form.Item name={field.name} initialValue={field.value}>
            <Input />
          </Form.Item>
          <Button type="primary" onClick={() => handleSubmit(form.getFieldsValue(field.name), index)}>
            提交{`field${index + 1}`}
          </Button>
          {fields.length > 1 && (
            <Button type="default" onClick={() => removeField(index)}>
              删除
            </Button>
          )}
        </Space>
      ))}
      <Button type="dashed" onClick={addField}>
        添加字段
      </Button>
    </Form>
  );
};

export default DynamicForm;