react實現(xiàn)動態(tài)增減表單項的示例代碼

更新時間：2024年05月23日 15:39:15 作者：做一個體面人

在做項目的時候,甲方給的信息有限,網(wǎng)頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧

在做項目的時候，甲方給的信息有限，網(wǎng)頁的備案信息寫成固定的，如下圖所示：

之后驗收的時候，甲方要求把這個備案信息寫成動態(tài)的，可以自增減，就去react組件庫看看有沒有具體的實現(xiàn)，果真有，具體實現(xiàn)如下：

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'});
}

前端向后端傳送的是一個對象數(shù)組，也就是這種格式：[{label: ‘xxx’, value: ‘xxx’}]
后端用Go實現(xiàn)，因為每次新增的信息可能不一樣，所以每次新增的時候，會先刪除舊的數(shù)據(jù)，再插入。
代碼如下：

// 定義結構體
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", "創(chuàng)建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
}

最終效果圖如下：