react實現(xiàn)動態(tài)表單
本文實例為大家分享了react實現(xiàn)動態(tài)表單的具體代碼,供大家參考,具體內(nèi)容如下
1.小要求
在工作中,我們也會碰到這樣子的需求:在填寫信息的時候,可以填寫多個人名、多個需求、以及動態(tài)生產(chǎn)一個分組。
今天我們就以: 可以動態(tài)的添加/刪除人名、路徑以及可以添加/刪除一個分組的需求來開始今天的學(xué)習(xí)之旅。需求如下圖所示:
2.技術(shù)點分析
1.數(shù)據(jù)結(jié)構(gòu)
2.react+antd 動態(tài)編輯表格數(shù)據(jù)提及的知識點
3.js操作數(shù)據(jù)的方法: 添加數(shù)據(jù)、根據(jù)下標(biāo)刪除數(shù)據(jù)
3.代碼分析
3.1 數(shù)據(jù)結(jié)構(gòu)分析
/** *?? ?1. 最外面是一個數(shù)組 *?? ?2. 中間是一個字典,每個字典就是一個分組 *?? ?3. name表示人名,也是一個數(shù)組,這樣子我們就可以動態(tài)的添加/刪除人名(path路徑,跟name同理) **/ const [data, setData] = useState([ ? ? ? ? { ? ? ? ? ? ? 'name': [''], ? ? ? ? ? ? 'path': [''] ? ? ? ? } ?])
3.2添加人名分析
添加路徑和添加人名的代碼類似,就不重復(fù)編寫了,大家可以去看完整的代碼。這里也“添加人名”舉例子:
<Button type="dashed" width={200} onClick={() => { ??? ??? ?// 采用了[...xxx]性質(zhì),在對應(yīng)分組中名字數(shù)據(jù)中添加一個空的數(shù)據(jù) ? ? ? ?let obj = [...data] ? ? ? ?setData([]) ? ? ? ?obj[index]['name'].push('') ? ? ? ?// 然后在更新數(shù)據(jù) ? ? ? ?setData(obj); ? ?}}>+添加人名</Button>
3.3修改人名分析
修改路徑和修改人名的代碼類似,就不重復(fù)編寫了,大家可以去看完整的代碼。這里也“修改人名”舉例子:
<Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => { ?? ? ?// 采用了[...xxx]性質(zhì), ? ? ? let obj = [...data] ? ? ? setData([]) ? ? ? // 修改對應(yīng)的人名 ? ? ? obj[index]['name'][nameIndex] = e.target.value ? ? ? // 然后在更新數(shù)據(jù) ? ? ? setData(obj) ? }} />
3.4刪除人名分析
刪除路徑和刪除人名的代碼類似,就不重復(fù)編寫了,大家可以去看完整的代碼。這里也“刪除人名”舉例子:
<MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => { ?? ?// 采用了[...xxx]性質(zhì), ? ? let obj = [...data] ? ? setData([]) ? ? // 刪除人名,使用js的數(shù)組用法: 根據(jù)下標(biāo)刪除 ? ? obj[index]['name'].splice(nameIndex, 1); ? ? setData(obj) }} />
3.5添加分組
<Button type="dashed" style={{width:'400px',}} onClick={()=>{ ??? ? ?// 采用了[...xxx]性質(zhì), ? ? ? let obj = [...data] ? ? ? setData([]) ? ? ? // 在原來的數(shù)組中,在添加一個對象 ? ? ? obj.push({ ? ? ? ? ? 'name':[''], ? ? ? ? ? 'path':[''] ? ? ? }) ? ? ? setData(obj); ? ?}}>+分組</Button>
3.6刪除分組
<MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => { ? ? let flag = 0 ? ? ?// 判斷名字/路徑的輸入框中是否有值 ? ? ?data[index]['name'].map(item=>{ ? ? ? ? ?if(item != ''){ ? ? ? ? ? ? ?flag = 1 ? ? ? ? ?} ? ? ?}) ? ? ?if(flag == 0){ ? ? ? ? ?data[index]['path'].map(item=>{ ? ? ? ? ? ? ?if(item != ''){ ? ? ? ? ? ? ? ? ?flag = 1 ? ? ? ? ? ? ?} ? ? ? ? ?}) ? ? ?} ?? ? // 如果有值的話,則出現(xiàn)一個彈框提示用戶這里還是有值的,是否要刪除 ? ? ?if(flag){ ? ? ? ? ?confirm({ ? ? ? ? ? ? ?title: '已經(jīng)編輯了部分數(shù)據(jù),確認要刪除', ? ? ? ? ? ? ?icon: <ExclamationCircleOutlined />, ? ? ? ? ? ? ?centered:'true', ? ? ? ? ? ? ?okText:'確認', ? ? ? ? ? ? ?cancelText:'取消', ? ? ? ? ? ? ?onOk() { ? ? ? ? ? ? ? ? ?let obj = [...data] ? ? ? ? ? ? ? ? ?setData([]) ? ? ? ? ? ? ? ? ?obj.splice(index, 1); ? ? ? ? ? ? ? ? ?setData(obj) ? ? ? ? ? ? ?}, ? ? ? ? ? ? ?onCancel() {}, ? ? ? ? ?}); ? ? ?}else{ ? ? ? ? ?let obj = [...data] ? ? ? ? ?setData([]) ? ? ? ? ?obj.splice(index, 1); ? ? ? ? ?setData(obj) ? ? ?} ? ?? ?}} />
4.完整代碼
import React, { useState } from 'react'; import { Input, Row, Col, Button, Divider, Modal } from 'antd' import { MinusCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons'; const { confirm } = Modal; function Index() { ? ? const [data, setData] = useState([ ? ? ? ? { ? ? ? ? ? ? 'name': [''], ? ? ? ? ? ? 'path': [''] ? ? ? ? } ? ? ]) ? ? return ( ? ? ? ? <div style={{ marginLeft: 50, marginTop: 100 }}> ? ? ? ? ? ? <div> ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? data.map((item, index) => { ? ? ? ? ? ? ? ? ? ? ? ? return <div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{display:'flex'}}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>第{index + 1}組</span> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 5, marginLeft: 8, display: data.length == 1 ? 'none' : '' }} onClick={() => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let flag = 0 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(data[index]['name']); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[index]['name'].map(item=>{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item != ''){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flag = 1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return false ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(flag == 0){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data[index]['path'].map(item=>{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item != ''){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? flag = 1 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return false ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(flag){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? confirm({ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: '已經(jīng)編輯了部分數(shù)據(jù),確認要刪除', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? icon: <ExclamationCircleOutlined />, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? centered:'true', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? okText:'確認', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cancelText:'取消', ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onOk() { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onCancel() {}, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.splice(index, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Divider /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Row> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.name.map((nameItem, nameIndex) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Col span={8}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', marginTop: 10 }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span >{'姓名' + (nameIndex + 1) + ':'}</span> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'][nameIndex] = e.target.value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'].splice(nameIndex, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Col> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Row> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Button type="dashed" width={200} onClick={() => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['name'].push('') ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>+添加人名</Button> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Row> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.path.map((pathItem, pathIndex) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return <Col span={8}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', marginTop: 10 }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span >{'路徑' + (pathIndex + 1) + ':'}</span> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Input style={{ width: 200, marginLeft: 10 }} value={pathItem} onChange={(e) => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'][pathIndex] = e.target.value ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.path.length == 1 ? 'none' : '' }} onClick={() => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'].splice(pathIndex, 1); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }} /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Col> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? </Row> ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style={{ display: 'flex', width: '100vw', justifyContent: 'center', marginTop: 10, marginBottom: 10 }}> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <Button type="dashed" width={200} onClick={() => { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? obj[index]['path'].push('') ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? setData(obj); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }}>+添加路徑</Button> ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? ? ? </div> ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? } ? ? ? ? ? ? </div> ? ? ? ? ? ? <div style={{display:'flex', width:'100vw', justifyContent:'center', marginTop:10, marginBottom:10}}> ? ? ? ? ? ? ? ? <Button type="dashed" style={{width:'400px',}} onClick={()=>{ ? ? ? ? ? ? ? ? ? ? let obj = [...data] ? ? ? ? ? ? ? ? ? ? setData([]) ? ? ? ? ? ? ? ? ? ? obj.push({ ? ? ? ? ? ? ? ? ? ? ? ? 'name':[''], ? ? ? ? ? ? ? ? ? ? ? ? 'path':[''] ? ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? setData(obj); ? ? ? ? ? ? ? ? }}>+分組</Button> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ) } export default Index
總結(jié)
好了,今天就分享到這里,希望大家在學(xué)習(xí)了一篇博文之后,可以封裝出自己的組件來應(yīng)對多種多樣的需求。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Hook 監(jiān)聽localStorage更新問題
這篇文章主要介紹了React Hook 監(jiān)聽localStorage更新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-03-03通過React-Native實現(xiàn)自定義橫向滑動進度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進度條相關(guān)知識感興趣的朋友一起看看吧2024-02-02React路由參數(shù)傳遞與嵌套路由的實現(xiàn)詳細講解
這篇文章主要介紹了React路由參數(shù)傳遞與嵌套路由的實現(xiàn),嵌套路由原則是可以無限嵌套,但是必須要讓使用二級路由的一級路由匹配到,否則不顯示,需要的朋友可以參考一下2022-09-09react-router-dom v6版本實現(xiàn)Tabs路由緩存切換功能
今天有人問我怎么實現(xiàn)React-Router-dom類似標(biāo)簽頁緩存,很久以前用的是react-router v5那個比較容易實現(xiàn),v6變化挺大,但了解react的機制和react-router的機制就容易了,本文介紹react-router-dom v6版本實現(xiàn)Tabs路由緩存切換,感興趣的朋友一起看看吧2023-10-10