React Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现

news2024/11/9 10:02:42

Antd Form.List 组件嵌套多级动态增减表单 + 表单联动复制实现

一、业务需求

有一个页面的组件,其中一部分需要用到动态的增减 + 复制表单,然后就想起
了使用 Antd 的 Form.List 去完成这个功能。

这个功能的要求是:

  • 首先是一个动态的表单,可以通过按钮进行增减操作,但是再嵌套了一层,就形成了 Form.List 再套 Form.List 了。
  • 第一个动态表单可以通过外层的按钮去添加同级的表单,嵌套的一层就是在同级的表单里面再套了一 Form.List,独属于这个模块下面的动态表单,然后这个下面的动态表单选择的内容又需要根据表单的选中的值进行联动
  • 第一层表单还可以进行复制,点击复制会生成在生成第一层同样的表单。

综合以上需求,大致的页面样子
在这里插入图片描述

二、实现思路

话不多说,直接上代码:
案例代码

三、问题

问题一:复制的时候由于存在表单联动,直接获取 form 对应字段的值虽然能附上值但是复制出来的下拉框没值 ,因为 useMemo 发生变化
复制时传给子组件的 id 为 先为有效值后不存在,所以缓存的下拉框选项值变为空。
在这里插入图片描述
这会导致在复制到时候出现下面的情况:
在这里插入图片描述
在这里插入图片描述
目前想到是用浏览器本地存储存下每次的 storeId 值,仅在有值的才写进去,每次读取 storeId 时候先判断 props 传过来的是否是空值,是空值就从 storage 里面取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/709563.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

事后多重比较案例分析

一、案例介绍 由单因素方差分析案例中,为研究郁金对低张性缺氧小鼠存活时间的影响,将36只小鼠随机生成A、B以及 C 三组,每组12个,雌雄各半,分别以10g/kg、20g/kg、40g/kg三种不同剂量的郁金灌胃,各组小鼠均…

08-C++学习笔记-类与对象

🔟🔒 08-C学习笔记-类与对象 在本篇学习笔记中,我们将详细讲解C中的类与对象的概念和相关知识。类是C中一种重要的数据类型,它允许我们自定义数据结构和相应的操作。 📚 C类与对象详细讲解 ✨类的概念 类是一种用户…

黑客(网络安全)自学

前言: 1.这是一条坚持的道路,三分钟的热情可以放弃往下看了. 2.多练多想,不要离开了教程什么都不会了.最好看完教程自己独立完成技术方面的开发. 3.有时多 google,baidu,我们往往都遇不到好心的大神,谁会无聊天天给你做解答 .4.遇到实在搞不懂的,可以先放放,以后…

3dmax导出cad

3dmax2022 导出cad 导入arcmap 10.2 导出版本为AutoCAD 2007 DWG

玩转Matplotlib的10个高级技巧

Matplotlib是Python中流行的数据可视化库,仅使用简单的几行代码就可以生成图表。但是默认的方法是生成的图表很简单,如果想增强数据演示的影响和清晰度,可以试试本文总结的10个高级技巧,这些技巧可以将可视化提升到一个新的水平: …

Hyperledger Fabric网络快速启动

目录 1、网络服务配置 2、关联的docker-compose-base.yaml 各Peer节点容器设置如下信息。 3、被关联的Peer-base.yaml 4、启动网络 2、完成通道的创建 2.1将节点加入应用通道 更新锚节点 2.为什么要创建节点并将其加入应用通道中? 1、网络服务配置 由于要启动…

人工智能(pytorch)搭建模型16-基于LSTM+CNN模型的高血压预测的应用

大家好,我是微学AI,今天给大家介绍一下人工智能(pytorch)搭建模型16-基于LSTMCNN模型的高血压预测的应用,LSTMCNN模型搭建与训练,本项目将利用pytorch搭建LSTMCNN模型,涉及项目:高血压预测,高血…

鼠标点击切换图片(使用js中的src属性)

使用到的知识点&#xff1a; 模板字符串 js中的src属性 img.src ./images/${i}.jpg 效果展示&#xff1a; 具体代码实现&#xff1a; <body><div class"box" style"width:500px;height:300px;margin:100px auto;"><img src&quo…

Python中获取指定目录下所有文件名的方法

在《Python中文件名和路径的操作》中提到&#xff0c;os模块中的函数可以对文件进行操作。通过递归以及os模块中提供的函数&#xff0c;可以获取指定目录下所有的文件名。 1 基本流程 通过递归获取指定目录下所有文件名的基本流程&#xff0c;如图1所示。 图1 基本流程 2 函…

Web开播系统的技术演进

随着直播SaaS业务的深入发展&#xff0c;Web端开播的诉求变得越来越强烈&#xff0c;对比客户端开播工具如OBS&#xff0c;Web开播与SaaS平台亲和度高&#xff0c;可以让用户快速体验平台全流程&#xff0c;同时易于分享链接&#xff0c;快速连麦。因此&#xff0c;寻求更加稳定…

#10046. 「一本通 2.2 练习 2」OKR-Periods of Words(内附封面)

[POI2006] OKR-Periods of Words 题面翻译 对于一个仅含小写字母的字符串 a a a&#xff0c; p p p 为 a a a 的前缀且 p ≠ a p\ne a pa&#xff0c;那么我们称 p p p 为 a a a 的 proper 前缀。 规定字符串 Q Q Q&#xff08;可以是空串&#xff09;表示 a a a 的…

CMake 变量

目录 cmake普通变量 如何取消变量 cmake环境变量 cmake缓存变量 普通变量使用: 缓存变量使用: cmake变量的作用域 block() block demo: function 函数作用域简单 demo 高级变量 总结: 和其他语言一样,cmake完全可以看做是一种编程语言,他有变量,有函数等. cmake普通…

解决uview-plus组件样式修改不生效

一、问题描述 使用 ::v-deep 、/deep/ 等各种 deep 写法后&#xff0c;修改 uview-plus组件样式依旧不生效 二、解决方案 在子组件中写页面布局&#xff0c;在父组件中写CSS样式 目录结构&#xff1a; 父组件中&#xff1a;引入子组件&#xff0c;使用::v-deep修改样式 子组件…

git配置密钥及提交代码到仓库

原文合集地址如下&#xff0c;有需要的朋友可以关注 本文地址 合集地址 一、git下载及安装 Git官网&#xff1a;www.git-scm.com/ 下载安装包进行安装。 点击downloads下载自己需要的安装包。本文基于windows系统。 下载安装包后双击exe文件&#xff0c;如何一系列next操作…

提升文件管理效率:轻松批量归类文件,按名称细分管理

现代生活中&#xff0c;我们每天都面对着大量的电子文件&#xff0c;如文档、照片、音乐和视频等。这么多文件堆积在一起&#xff0c;怎样快速找到需要的文件成了一个挑战。现在有应该方法可以帮助您提升文件管理效率&#xff0c;方法如下&#xff1a; 首先&#xff0c;第一步…

AutoSAR系列讲解(入门篇)4.6-BSW的Watchdog功能

一、架构与术语解释 前面都挺难的吧&#xff1f;实践出真知&#xff0c;后面实践篇的时候&#xff0c;大家应该就能明白了。这一节就来讲个简单的功能------看门狗。看门狗想必大家应该都再熟悉不过了吧&#xff0c;主要就下面三层结构&#xff0c;简单明了&#xff0c;这节确实…

从入门到精通:解锁Linux开发工具和编译器的力量

目录 一.编辑器vim的使用1.vim的基本概念2.vim的使用二.编译器gcc/g1.编译器的使用2.编译器是如何完成的&#xff1f;3.动态库与静态库 一.编辑器vim的使用 1.vim的基本概念 vim是一个方便编程的功能特别丰富的文本编辑器&#xff0c;凭借他简洁的三种模式以及丰富的快捷键操…

Arduino IDE的安装

https://www.arduino.cc/en/software/

AI 绘画 - 建筑绘图辅助设计之 Controlnet

前情提要 2023-06-17 周六 杭州 阴 小记: 早上还是可以听到淅淅沥沥的雨声&#xff0c;或许梅雨季快要来了&#xff0c;潮湿的感觉说不上多讨厌&#xff0c;可是也没有那么喜欢&#xff1b;最近在追动画《飞出个未来》&#xff0c;我是把这个动画当作哲学课来看的&#xff0c…