antd Form.List 自定义add方法实现一个小例子

想要用antd中的form实现上图，可以通过自定义Form.List 的 add方法

import {useEffect} form 'react'
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';

const Demo = () => {
  const [form] = Form.useForm()
  const isAdd=1
   useEffect(() => {
    handleAddItem()
  }, [isAdd])
  
  const onFinish = values => {
    console.log('Received values of form:', values);
  };
	 const handleAddItem = () => {
    const list = form.getFieldValue('users') || []

    const nextList = list.concat({
      key: list.length,
      name: list.length,
      fieldKey: list.length,
    })
    form.setFieldsValue({
      users: nextList,
    })
  }
  
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, fieldKey, ...restField }) => (
              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...restField}
                  name={[name, 'first']}
                  fieldKey={[fieldKey, 'first']}
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item
                  {...restField}
                  name={[name, 'last']}
                  fieldKey={[fieldKey, 'last']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="Last Name" />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(name)} />
                 <PlusCircleOutlined onClick={() => handleAddItem()} />
              </Space>
            ))}

          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

tip：想要自定义remove方法的话和自定义add方法一样