react实现动态增减表单项的示例代码

import { pageheaderwrapper } from '@ant-design/pro-layout';
import { button, form, input, card, space, message} from 'antd';
import customform from '@/components/form';
import { formattedmessage, useintl } from 'umi';
import { saverecordinfomation, getrecordinfomation } from '@/services/record'
import { useeffect } from 'react';
import { minuscircleoutlined, plusoutlined } from '@ant-design/icons';
const formitemlayout = {
    labelcol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 6,
        },
    },
    wrappercol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 14,
        },
    },
};
const recordinformation = () => {
    const intl = useintl()
    const [form] = form.useform();
    const onreset = () => {
        form.resetfields();
    };
    useeffect(() => {
        getrecordinfo()
        return () => { };
    }, []);
    const getrecordinfo = async () => {
        getrecordinfomation().then((res) => {
            if (res.code === 0) {
                form.setfieldsvalue({
                    recordsinformation: res.data.map((item, index) => ({
                        ...item,
                        key: index,
                    })),
                });
            }
        });
    }
    const onfinish = async (forms) => {
        const res = await saverecordinfomation(forms.recordsinformation)
        if (res.code === 0) {
            message.success(intl.formatmessage({ id: 'pages.cms.save.success' }))
            getrecordinfo()
        } else {
            message.error(intl.formatmessage({ id: 'pages.cms.save.fail' }))
        }
    }
    return (
        <pageheaderwrapper ghost={false}>
            <div>
                <card style={{ height: '95%', }}>
                    <form
                        {...formitemlayout}
                        variant="filled"
                        style={{
                            maxwidth: 1000,
                        }}
                        form={form}
                        onfinish={onfinish}
                    >
                        <form.list name="recordsinformation">
                            {(fields, { add, remove }) => (
                                <>
                                    {fields.map(({ key, name, ...restfield }) => (
                                        <space key={key} style={{ display: 'flex', marginbottom: 8, marginright: 0, }} align="baseline" >
                                            <form.item
                                                {...restfield}
                                                name={[name, 'label']}
                                                rules={[{ required: true, message: 'missing first name' }]}
                                            >
                                                <input placeholder={intl.formatmessage({ id: 'pages.record.info.content.public.net.example.filing'})} style={{ width:105,  textalign: 'right', border:'none' }} />
                                            </form.item>
                                            <form.item
                                                {...restfield}
                                                name={[name, 'value']}
                                                rules={[{ required: true, message: 'missing last name' }]}
                                            >
                                                <input placeholder={intl.formatmessage({ id: 'pages.record.info.content.public.net.example.filing.url'})} style={{ width:300,  }}/>
                                            </form.item>
                                            <minuscircleoutlined onclick={() => remove(name)} />
                                        </space>
                                    ))}
                                    <form.item >
                                        <button style={{width: 405}} type="dashed" onclick={() => add()} block icon={<plusoutlined />}>
                                            <formattedmessage id='pages.record.info.content.add' />
                                        </button>
                                    </form.item>
                                </>
                            )}
                        </form.list>
                        <form.item
                        >
                            <space>
                                <button type="primary" htmltype="submit">
                                    <formattedmessage id='pages.save' />
                                </button>
                            </space>
                        </form.item>
                    </form>
                </card>
            </div>
        </pageheaderwrapper>
    );
};
export default recordinformation;

// record.js文件
import { request } from 'umi';
import { formatrequrl } from '../../common';
export async function saverecordinfomation(data) {
    console.log(data)
    return request('/beian',{method:'post', data: data});
}
export async function getrecordinfomation() {
    return request('/beian',{method:'get'});
}

// 定义结构体
type beian struct {
	label        string `bson:"label" json:"label"`
	value        string `bson:"value" json:"value"`
	defaultfield `bson:",inline"`
}
// controller
func (ctl *beiancontroller) post(c *gin.context) resp.json {
	c.set("log-opt", "创建beian")
	doc := []models.beian{}
	if err := c.shouldbind(&doc); err != nil {
		return resp.error(http.statusbadrequest, gin.h{}, err)
	}
	c.set("log-content", models.doc2string(doc))
	id, err := ctl.srv.insert(doc)
	if err != nil {
		return resp.error(http.statusinternalservererror, gin.h{}, err)
	}
	return resp.success(gin.h{"id": id})
}
//service
func (i *beianserviceimpl) insert(doc []models.beian) (primitive.objectid, error) {
	ctx := context.background()
	// 先删除
	_, err := i.m.db.collection(beiancoll).removeall(ctx, bson.m{})
	if err != nil {
		return primitive.nilobjectid, err
	}
	// 再保存
	var insertedid primitive.objectid
	for _, info := range doc {
		result, err := i.m.db.collection(beiancoll).insertone(ctx, &info)
		if err != nil {
			return primitive.nilobjectid, err
		}
		if insertedid.iszero() {
			insertedid = result.insertedid.(primitive.objectid)
		}
	}
	return insertedid, nil
}