Ant Design动态增加表单项

Ant Design中的from表单里可以实现动态增加表单，以下就是结合table表格和modal模态框来进行实现的一个过程。

import React, { useState } from 'react'
import { Button, Table, Modal, Form, Input, Upload, App } from 'antd'

export default function index() {
    const [addData, setAddData] = useState(null)
    const [addModal, setAddModal] = useState(false)
    const [playImages, setPlayImages] = useState([])

    const [form] = Form.useForm()

    const columnsAdd = [
        {
            title: '人员信息数量',
            dataIndex: 'usernum',
            key: 'usernum',
            render: (count: number) => `已添加 ${count} 条人员信息`,
        },
    ]

    // 添加人员
    const addPerson = () => {
        form.validateFields().then((values) => {
            const personCount = values.personinfo?.length || 0
            setAddData({
                usernum: personCount,
                key: Date.now(),
            })
            setAddModal(false)
            form.resetFields()
        })
    }

    // 上传图片
    const addImg = (info: any, index: number) => {
        console.log('info', info)
        setPlayImages([...playImages, info.fileList])
    }

    // 上传图片前的校验
    const beforeUpload = (file: any) => {
        console.log('file', file)
    }

    return (
        <div>
            <div
                style={{
                    marginTop: '-30px',
                    textAlign: 'right',
                }}
            >
                <Button
                    type="primary"
                    onClick={() => setAddModal(true)}
                    disabled={addModal ? true : false}
                >
                    添加人员
                </Button>
                {/* 添加人员配置表格 */}
                <Table
                    dataSource={addData ? [addData] : []}
                    columns={columnsAdd}
                    pagination={false}
                />
            </div>
            <Modal
                open={addModal}
                onCancel={() => setAddModal(false)}
                onOk={addPerson}
                title="添加人员"
            >
                <Form form={form}>
                    <Form.List name="personinfo">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map((field, index) => (
                                    <div style={{ display: 'flex' }}>
                                        <Form.Item
                                            label={`人员信息${index + 1}`}
                                            key={field.key}
                                        >
                                            <div key={field.key}>
                                                <Form.Item
                                                    label="姓名"
                                                    name={[
                                                        field.name,
                                                        'username',
                                                    ]}
                                                >
                                                    <Input />
                                                </Form.Item>

                                                <Form.Item
                                                    label="年龄"
                                                    name={[
                                                        field.name,
                                                        'userage',
                                                    ]}
                                                >
                                                    <Input />
                                                </Form.Item>

                                                <Form.Item
                                                    label="上传头像"
                                                    name={[
                                                        field.name,
                                                        'userimg',
                                                    ]}
                                                >
                                                    <Upload
                                                        // 接受上传的文件类型
                                                        accept=".jpg,.png"
                                                        // 上传图片的接口地址
                                                        action={`img_upload`}
                                                        // 上传图片的文件列表，
                                                        fileList={
                                                            playImages[index] ||
                                                            []
                                                        }
                                                        onChange={(info) =>
                                                            addImg(info, index)
                                                        }
                                                        // 上传图片前的钩子，校验方法
                                                        beforeUpload={
                                                            beforeUpload
                                                        }
                                                        // 上传图片的最大数量
                                                        maxCount={1}
                                                    >
                                                        <Button>
                                                            上传图片
                                                        </Button>
                                                    </Upload>
                                                </Form.Item>
                                            </div>
                                        </Form.Item>
                                        {fields.length > 1 ? (
                                            <Button
                                                onClick={() =>
                                                    remove(field.name)
                                                }
                                            >
                                                -
                                            </Button>
                                        ) : null}
                                    </div>
                                ))}
                                {/* 按钮居中 */}
                                <Form.Item
                                    style={{
                                        textAlign: 'center',
                                    }}
                                >
                                    <Button
                                        type="dashed"
                                        onClick={() => add()}
                                        style={{ width: '300px' }}
                                    >
                                        +添加人员
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Form>
            </Modal>
        </div>
    )
}