useDynamicList 实现动态列表

useDynamicList 一个帮助你管理动态列表状态，并能生成唯一 key 的 Hook useDynamicList

Demo

import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { useDynamicList } from 'ahooks';
import { Button, Form, Input, Space } from 'antd';
import React from 'react';

const mockData = [
    { firstName: 'Maray', lastName: 'Jon' },
    { firstName: '小红', lastName: '珍妮' },
]

export default () => {
    const { list, remove, push, getKey } = useDynamicList(mockData);
    return (
        <>
            <Form autoComplete='off' onFinish={(val) => console.log('val', val)}>
                {list.map((item: { firstName: string, lastName: string }, index) => (
                    <Space key={index} style={{ display: 'flex', marginBottom: 8 }} align='baseline'>
                        <Form.Item name={['firstName', getKey(index)]} required initialValue={item?.firstName}>
                            <Input allowClear placeholder='请输入' />
                        </Form.Item>
                        <Form.Item name={['lastName', getKey(index)]} required initialValue={item?.lastName}>
                            <Input allowClear placeholder='请输入' />
                        </Form.Item>
                        <MinusCircleOutlined onClick={() => remove(index)} />
                    </Space>
                ))}
                <Form.Item>
                    <Button type='dashed' onClick={() => push({ firstName: '', lastName: '' })} icon={<PlusOutlined />}>
                        添加一行
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType='submit' type='primary'>提交</Button>
                </Form.Item>
            </Form>
        </>
    );
};

效果图