react實現動態表單
本文實例為大傢分享瞭react實現動態表單的具體代碼，供大傢參考，具體內容如下
1.小要求
在工作中，我們也會碰到這樣子的需求：在填寫信息的時候，可以填寫多個人名、多個需求、以及動態生產一個分組。
今天我們就以: 可以動態的添加/刪除人名、路徑以及可以添加/刪除一個分組的需求來開始今天的學習之旅。需求如下圖所示:
2.技術點分析
1.數據結構
2.react+antd 動態編輯表格數據提及的知識點
3.js操作數據的方法: 添加數據、根據下標刪除數據
3.代碼分析
3.1 數據結構分析
/**
* 1. 最外面是一個數組
* 2. 中間是一個字典，每個字典就是一個分組
* 3. name表示人名，也是一個數組，這樣子我們就可以動態的添加/刪除人名(path路徑，跟name同理)
**/
const [data, setData] = useState([
{
'name': [''],
'path': ['']
}
])
3.2添加人名分析
添加路徑和添加人名的代碼類似，就不重復編寫瞭，大傢可以去看完整的代碼。這裡也“添加人名”舉例子:
<Button type="dashed" width={200} onClick={() => {
// 采用瞭[...xxx]性質，在對應分組中名字數據中添加一個空的數據
let obj = [...data]
setData([])
obj[index]['name'].push('')
// 然後在更新數據
setData(obj);
}}>+添加人名</Button>
3.3修改人名分析
修改路徑和修改人名的代碼類似，就不重復編寫瞭，大傢可以去看完整的代碼。這裡也“修改人名”舉例子:
<Input style={{ width: 200, marginLeft: 10 }} value={nameItem} onChange={(e) => {
// 采用瞭[...xxx]性質，
let obj = [...data]
setData([])
// 修改對應的人名
obj[index]['name'][nameIndex] = e.target.value
// 然後在更新數據
setData(obj)
}} />
3.4刪除人名分析
刪除路徑和刪除人名的代碼類似，就不重復編寫瞭，大傢可以去看完整的代碼。這裡也“刪除人名”舉例子:
<MinusCircleOutlined style={{ marginTop: 10, marginLeft: 5, display: item.name.length == 1 ? 'none' : '' }} onClick={() => {
// 采用瞭[...xxx]性質，
let obj = [...data]
setData([])
// 刪除人名，使用js的數組用法: 根據下標刪除
obj[index]['name'].splice(nameIndex, 1);
setData(obj)
}} />
3.5添加分組
<Button type="dashed" style={{width:'400px',}} onClick={()=>{
// 采用瞭[...xxx]性質，
let obj = [...data]
setData([])
// 在原來的數組中，在添加一個對象
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
}
})
}
// 如果有值的話，則出現一個彈框提示用戶這裡還是有值的，是否要刪除
if(flag){
confirm({
title: '已經編輯瞭部分數據，確認要刪除',
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: '已經編輯瞭部分數據，確認要刪除',
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
總結
好瞭，今天就分享到這裡，希望大傢在學習瞭一篇博文之後，可以封裝出自己的組件來應對多種多樣的需求。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。