本文实例为大家分享了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添加人名分析
添加路径和添加人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“添加人名”举例子:
3.3修改人名分析
修改路径和修改人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“修改人名”举例子:
{
// 采用了[...xxx]性质，
let obj = [...data]
setData([])
// 修改对应的人名
obj[index]['name'][nameIndex] = e.target.value
// 然后在更新数据
setData(obj)
}} />
3.4删除人名分析
删除路径和删除人名的代码类似，就不重复编写了，大家可以去看完整的代码。这里也“删除人名”举例子:
{ // 采用了[...xxx]性质， let obj = [...data] setData([]) // 删除人名，使用js的数组用法: 根据下标删除 obj[index]['name'].splice(nameIndex, 1); setData(obj) }} />
3.5添加分组
3.6删除分组
{ 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: , 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 (
{
data.map((item, index) => {
return
第{index + 1}组
{
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:
{
item.name.map((nameItem, nameIndex) => {
return {
let obj = [...data]
setData([])
obj[index]['name'].splice(nameIndex, 1);
setData(obj)
}} />
})
}
{
item.path.map((pathItem, pathIndex) => {
return {
let obj = [...data]
setData([])
obj[index]['path'].splice(pathIndex, 1);
setData(obj)
}} />
})
}
})
}
)
}
export default Index
总结
好了，今天就分享到这里，希望大家在学习了一篇博文之后，可以封装出自己的组件来应对多种多样的需求。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。