基于react封装的一个类似Form.List功能的组件

子组件（Form.List组件）

import React from 'react';
import { Form, Col, Row, Select } from 'antd'
const { Option } = Select

interface Iprops {
    data: Idata[]
    setData: any
}

interface Idata {
    nickNameId: number | undefined
    nameId: number | undefined
}

export default function FormList(props: Iprops) {
    const { data, setData } = props
    const userNameList = [
        {
            name: 'tom',
            id: 1
        },
        {
            name: 'jack',
            id: 2
        },
        {
            name: 'cat',
            id: 3
        },
    ]
    const nickNameList = [
        {
            nickName: 'tom',
            id: 1
        },
        {
            nickName: 'jack',
            id: 2
        },
        {
            nickName: 'cat',
            id: 3
        },
    ]
    const iconStyle: any = {
        marginLeft: '4px',
        marginTop: '8px',
        width: '16px',
        height: '16px',
        borderRadius: '8px',
        border: '1px solid #333',
        display: 'inline-block',
        lineHeight: '16px',
        textAlign: 'center',
        cursor: 'pointer'
    }

    const style = {
        width: '45%',
        marginRight: '5%'
    }

    //删除
    const remove = (index: number) => {
        if (data.length > 1) {
            setData(
                () => {
                    data.splice(index, 1)
                    return [...data]
                }
            )
        } else {
            setData(
                () => {
                    data.splice(index, 1, { nameId: undefined, nickNameId: undefined })
                    return [...data]
                }
            )
        }

    }

    //添加
    const add = (index: number) => {
        setData(
            () => {
                data.push({ nameId: undefined, nickNameId: undefined })
                return [...data]
            }
        )
    }

    const onUserNameChange = (e: number | undefined, index: number) => {
        setData(
            () => {
                data.splice(index, 1, { nameId: e, nickNameId: data[index].nickNameId })
                return [...data]
            }
        )
    }

    const onNickNameChange = (e: number | undefined, index: number) => {
        setData(
            () => {
                data.splice(index, 1, { nameId: data[index].nameId, nickNameId: e })
                return [...data]
            }
        )
    }

    return (
        <>
            {
                data.map((item, index) => {
                    return <Row key={index} gutter={24}>
                        <Col span={12}>
                            <Form.Item label="用户名">
                                <Select
                                    placeholder="用户名"
                                    onChange={(e: any) => {
                                        onUserNameChange(e, index)
                                    }}
                                    style={style}
                                    value={data[index].nameId}
                                >
                                    {userNameList.map((item: any, index) => (
                                        <Option value={item.id} key={index}>
                                            {item.name}
                                        </Option>
                                    ))}
                                </Select>
                                <Select
                                    placeholder="昵称"
                                    style={style}
                                    onChange={(e: any) => {
                                        onNickNameChange(e, index)
                                    }}
                                    value={data[index].nickNameId}
                                >
                                    {nickNameList.map((item: any, index) => (
                                        <Option value={item.id} key={index}>
                                            {item.nickName}
                                        </Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                        <div
                            style={iconStyle}
                            onClick={() => {
                                remove(index)
                            }}
                        >
                            <span style={{ fontWeight: 'bold', fontSize: '16px', position: 'relative', bottom: '3px' }}>-</span>
                        </div>
                        <div
                            style={iconStyle}
                            onClick={() => {
                                add(index)
                            }}
                        >
                            <span style={{ fontWeight: 'bold', fontSize: '16px', position: 'relative', bottom: '3px' }}>+</span>
                        </div>
                    </Row>
                })
            }
        </>
    );

}

父组件

import React, { useState } from 'react';
import { Col, Form, Input, Row, Button } from 'antd'
import FormList from './formList'


interface Idata {
    nickNameId: number | undefined
    nameId: number | undefined
}

export default function IndexedDb() {
    const [form] = Form.useForm()
    const [data, setData] = useState<Idata[]>([{ nickNameId: undefined, nameId: undefined }])

    const save = () => {
        const value = form.getFieldsValue()
        value.userNameList = data
        console.log(value, 'value')
    }

    return (
        <Form form={form}>
            <Row gutter={24}>
                <Col span={6}>
                    <Form.Item label="订单编号" name="contractCode">
                        <Input placeholder="请输入订单编号" />
                    </Form.Item>
                </Col>
                <Col span={6}>
                    <Form.Item label="客户姓名" name="customerName">
                        <Input placeholder="请输入客户姓名" />
                    </Form.Item>
                </Col>
            </Row>
            <FormList data={data} setData={setData} />
            <Col span={12} style={{ textAlign: 'right' }}>
                <Button onClick={save} type="primary">确定</Button>
            </Col>
        </Form>
    );

}