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 || 0setAddData({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><divstyle={{marginTop: '-30px',textAlign: 'right',}}><Buttontype="primary"onClick={() => setAddModal(true)}disabled={addModal ? true : false}>添加人员</Button>{/* 添加人员配置表格 */}<TabledataSource={addData ? [addData] : []}columns={columnsAdd}pagination={false}/></div><Modalopen={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.Itemlabel={`人员信息${index + 1}`}key={field.key}><div key={field.key}><Form.Itemlabel="姓名"name={[field.name,'username',]}><Input /></Form.Item><Form.Itemlabel="年龄"name={[field.name,'userage',]}><Input /></Form.Item><Form.Itemlabel="上传头像"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 ? (<ButtononClick={() =>remove(field.name)}>-</Button>) : null}</div>))}{/* 按钮居中 */}<Form.Itemstyle={{textAlign: 'center',}}><Buttontype="dashed"onClick={() => add()}style={{ width: '300px' }}>+添加人员</Button></Form.Item></>)}</Form.List></Form></Modal></div>)
}