antd Form shouldUpdate 关联展示 form 数组赋值

form 数组中嵌套数值更新

注意:数组是引用类型

在这里插入图片描述
项目需求,表单中包含多个产品信息,使用form.list 数组嵌套,提货方式如果是邮寄展示地址,如果是自提,需要在该条目中增加两项

代码如下:
// An highlighted block
<Card title="产品信息" bordered={false}><Form.List name="productList" >{(fields, {add, remove}) => (<>{fields.map((field,index) => (<Row  gutter={16} >{/* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 注意 -----start*/ }<Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="库存组织"name={[field.name,"kuCun"]}rules={[{required: true,message: '请选择',},]}><Select><Select.Option value="u238475">u238475</Select.Option><Select.Option value="u238472">u238472</Select.Option></Select></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="产品线"name={[field.name,"chanPin"]}rules={[{required: true,message: '请输入',},]}><Select><Select.Option value="you1">CTM-产品1</Select.Option><Select.Option value="zi1">CTM-产品2</Select.Option></Select></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="产品名称"name={[field.name,"wuMiao"]}rules={[{required: true,message: '请输入',},]}><Input placeholder="请输入" /></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="提货方式"name={[field.name,"tType"]}rules={[{required: true,message: '请输入',},]}><Select><Select.Option value="you">邮寄</Select.Option><Select.Option value="zi">自提</Select.Option></Select></Form.Item></Col><Form.Item noStyle  shouldUpdate={(pre,cur) => {//    如果删除一条信息,cur.productList[index]是空值,所以需要判断if(cur.productList[index]&&pre.productList[index]){// 判断当前是自提还是邮寄return pre.productList[index].tType !== cur.productList[index].tType}else{return false}}}>{({getFieldValue}) =>{const type = getFieldValue('productList'){/* 当前是自提的时候需要填写自提人信息 */}if(type[index].tType&&type[index].tType=='zi'){return <><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="自提人姓名"name={[field.name,"tName"]}rules={[{required: true,message: '请输入',},]}><Input placeholder="请输入" /></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="身份证号"name={[field.name,"tShen"]}rules={[{required: true,message: '请输入',},]}><Input placeholder="请输入" /></Form.Item></Col></>}else{{/* 有一个问题,当切换回邮寄。之前填写的自提人和身份证号删除(只需要将type数组中的数据清空即可,不需要再特意给form赋值,他们是引用类型) */}Object.assign(type[index],{tName:'',tShen:''})return <></>}}}</Form.Item>{ /* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 -----end*/ }<div styleName="item_btn_wrap"><PlusCircleFilled styleName="add_item_btn" onClick={() => add({tType:'zi'})} />{fields.length>1&&<CloseCircleFilled  styleName="remove_item_btn" onClick={() => remove(field.name)} />}</div></Row>))}</>)}</Form.List></Card>
**关键点解释**1. shouldUpdate 是依赖当前form中的变化。所以在其中加上判断,pre是之前 cur是当前,然后根据数组嵌套找到当前值变化就返回true,就会走下面的代码2. Form.Item noStyle 是没有样式的,不需要添加{...field} 不是其中一项3. getFieldValue 获取当前的form值,根据值来展示

问题 在切换不展示时,之前填写的值不清空,所以重点来了
数组是引用类型
数组是引用类型
数组是引用类型

之前一直解决不了,还想用setFomValue来解决,根本不用,因为数组是引用类型,所以直接操作原来的数组值就可以

// An highlighted block
Object.assign(type[index],{tName:'',tShen:''})

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Linux怎么用vim实现把一个文件里面的文本复制到另一个文件里面

2023年10月9日&#xff0c;周一下午 我昨天遇到了这个问题&#xff0c;但在网上没找到图文并茂的博客&#xff0c;于是我自己摸索出解决办法后&#xff0c;决定写一篇图文并茂的博客。 情景 假设现在我要用vim把file_transfer.cpp的内容复制到file_transfer.hpp里面 第一步 …

如何判断直流回馈老化测试负载是否合格?

直流回馈老化测试负载的合格与否&#xff0c;可以通过测试负载在长时间工作过程中&#xff0c;其输出电流应保持稳定。监测负载输出电流的波动情况来判断&#xff0c;波动范围越小越好。 测试负载在工作过程中会产生热量&#xff0c;因此需要关注其温度升高情况&#xff0c;负载…

知识付费H5页面+后端+全功能制作源码系统

罗峰今天给大家要分享的是知识付费H5页面制作的源码系统&#xff0c;H5也是一种响应式界面&#xff0c;能自动兼容所有的打开设备屏幕&#xff0c;使得页面在不同尺寸的手机、平板等设备上打开时&#xff0c;界面也会自动兼容适应。这也是大部分用户选择H5页面的原因&#xff0…

分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输…

语义分割笔记(三):通过opencv对mask图片来画分割对象的外接椭圆

文章目录 mask图像介绍步骤代码 mask图像介绍 根据 mask 图像来画分割对象的外接椭圆是一种常见的图像分割任务。Mask 图像通常是一个二值图像&#xff0c;其中包含了感兴趣对象的像素。通常情况下&#xff0c;白色像素表示对象&#xff0c;黑色像素表示背景。 步骤 以下是一…

Linux知识点 -- 网络基础 -- 数据链路层

Linux知识点 – 网络基础 – 数据链路层 文章目录 Linux知识点 -- 网络基础 -- 数据链路层一、数据链路层1.以太网2.以太网帧格式3.重谈局域网原理4.MAC地址5.MTU6.查看硬件地址和MTU的命令7.ARP协议 二、其他重要协议或技术1.DNS&#xff08;Domain Name System&#xff09;2.…

MySQL 面试知识脑图 初高级知识点

脑图下载地址&#xff1a;https://mm.edrawsoft.cn/mobile-share/index.html?uuid18b10870122586-src&share_type1 sql_mode 基本语法及校验规则 ONLY_FULL_GROUP_BY 对于GROUP BY聚合操作&#xff0c;如果在SELECT中的列&#xff0c;没有在GROUP BY中出现&#xff…

什么是指标体系,怎么搭建一套完整的指标体系?(附PDF素材)

什么是指标体系&#xff0c;怎么搭建一套完整的指标体系&#xff1f;数字化转型过程中&#xff0c;这个问题一直困扰着数据分析师。主要体现在&#xff1a; 各部门根据业务需求&#xff0c;都有一部分量化指标&#xff0c;但不够全面&#xff0c;对企业整体数据分析应用能力提…

2023年中国电子白板市场规模、竞争格局及应用领域市场结构[图]

电子白板作为新型教育手段&#xff0c;如果合理地运用到现代教育活动中&#xff0c;使其自身的重视功能高效发挥出来&#xff0c;就能够极大地提升教育活动开展的顺利程度&#xff0c;加深学生对知识点的理解与把握&#xff0c;充分尊重学生是学习主体的地位&#xff0c;将保障…

C# +.Net C/S架构,在二甲医院全面实际使用三年的LIS系统源码

LIS系统源码技术细节&#xff1a; 体系结构&#xff1a;Client/Server架构 SaaS模式 客户端&#xff1a;WPFWindows Forms 服务端&#xff1a;C# .Net 数据库&#xff1a;Oracle 接口技术&#xff1a;RESTful API HttpWCF LIS检验系统一种专门用于医院化验室的计算机…

Vue、js底层深入理解笔记(二)

1.跨域 跨域原因 > 浏览器的同源策略 属于一种保护机制 如果没有同源策略的保护 一般用来处理登录cookie、服务端验证通过后会在响应头加入Set-Cookie字段、下次再发请求的时候&#xff0c;浏览器会自动将cookie附加在HTTP请求的头字段Cookie中、也就是说跳转到其他网站你也…

【深蓝学院】手写VIO第7章--VINS初始化和VIO系统--笔记

0. 内容 1. VIO回顾 整个视觉前端pipeline回顾&#xff1a; 两帧图像&#xff0c;可提取特征点&#xff0c;特征匹配&#xff08;描述子暴力匹配或者光流&#xff09;已知特征点匹配关系&#xff0c;利用几何约束计算relative pose([R|t])&#xff0c;translation只有方向&…