react實現(xiàn)動態(tài)增減表單項的示例代碼
更新時間：2024年05月23日 15:39:15 作者：做一個體面人
在做項目的時候,甲方給的信息有限,網頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現(xiàn)動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧
在做項目的時候，甲方給的信息有限，網頁的備案信息寫成固定的，如下圖所示：
之后驗收的時候，甲方要求把這個備案信息寫成動態(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
}最終效果圖如下：
到此這篇關于react實現(xiàn)動態(tài)增減表單項的文章就介紹到這了,更多相關react動態(tài)增減表單項內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了create-react-app常用自定義配置教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了ahooks控制時機的hook實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在React函數(shù)式組件中，我們可以通過useState()來創(chuàng)建state，這種state創(chuàng)建方式會給我們返回兩個東西state和setState()。2023-04-04
React教程之Props驗證的具體用法（Props Validation）
這篇文章主要介紹了React教程之Props驗證的具體用法（Props Validation），非常具有實用價值，需要的朋友可以參考下2017-09-09
Remix 后臺桌面開發(fā)electron-remix-antd-admin
這篇文章主要為大家介紹了Remix 后臺桌面開發(fā)electron-remix-antd-admin的過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
這篇文章主要介紹了使用react遍歷對象生成dom問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
TypeScript通常都會依賴于框架，例如和vue、react 這些框架結合，本文就主要介紹了React項目中應用TypeScript的實現(xiàn)，分享給大家，具體如下：2021-09-09
這篇文章主要為大家介紹了ahooks正式發(fā)布值得擁有的React?Hooks工具庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Antd react上傳圖片格式限制的實現(xiàn)代碼,本文通過實例代碼圖文效果給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-12-12