Antd form:将动态id与form-value一起传递

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

const DynamicForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form:', values);
  };

  return (
    <Form form={form} name="dynamic_form" onFinish={onFinish}>
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => (
              <Form.Item
                key={field.key}
                label={`User ${index + 1}`}
                required={false}
                style={{ marginBottom: 0 }}
              >
                <Form.Item
                  {...field}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      whitespace: true,
                      message: "Please input user's name or delete this field.",
                    },
                  ]}
                  noStyle
                >
                  <Input placeholder="user name" style={{ width: '60%' }} />
                </Form.Item>
                {fields.length > 1 ? (
                  <Button
                    type="link"
                    onClick={() => remove(field.name)}
                  >
                    Remove
                  </Button>
                ) : null}
              </Form.Item>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default DynamicForm;