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.rhkb.cn/news/155598.html

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

相关文章

K8S云计算系列-(4)

K8s Dashboard UI 部署实操 Kubernetes实现的最重要的工作是对Docker容器集群统一的管理和调度&#xff0c;通常使用命令行来操作Kubernetes集群及各个节点&#xff0c;命令行操作非常不方便&#xff0c;如果使用UI界面来可视化操作&#xff0c;会更加方便的管理和维护。如下为…

优盘无法格式化?分享简单解决方法!

“我的优盘插入了一个带病毒的电脑中&#xff0c;现在优盘也中毒了&#xff0c;想把它格式化。但是操作的时候却显示优盘无法格式化&#xff0c;这种情况应该怎么办呢&#xff1f;” 优盘&#xff0c;又称USB闪存驱动器。由于其体积小且方便携带&#xff0c;受到广大电脑用户的…

elasticsearch 8.5.3问题记录

一&#xff1a;解决 elasticsearch 高版本 warning: ignoring JAVA_HOMEC:\Program Files\Java\jdk-11&#xff1b; using bundled JDK if defined JAVA_HOME (set JAVA_HOME%JAVA_HOME%; )示例版本Elasticsearch 8.5.3 可以与 JDK 11 兼容&#xff0c;但不支持 JDK 17。确保选…

亏损8.5万亿,美芯将敞开供应存储芯片,试图压制中国存储芯片

近期美国表示将给与韩国存储芯片无限期豁免&#xff0c;允许它们将先进芯片设备运到它们在中国的存储芯片&#xff0c;这意味着这两家韩国存储芯片企业可以敞开对中国供应存储芯片了&#xff0c;为何美国会突然放开呢&#xff1f; 一方面是韩国存储芯片已陷入窘境&#xff0c;据…

【算法-贪心】无重叠区间-力扣 435 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

Blender:对模型着色

Blender&#xff1a;使用立方体制作动漫头像-CSDN博客 上一步已经做了一个头像模型&#xff0c;我做的太丑了&#xff0c;就以这个外星人头像为例 首先切换到着色器编辑器 依次搜索&#xff1a;纹理坐标、映射、分离xyz和颜色渐变 这里的功能也是非常丰富和强大&#xff0c…

迁移学习--预训练微调

目录 1、迁移学习作用 2、迁移学习的途径 3、相关的领域 4、在计算机视觉中的应用 5、迁移学习的办法 预训练模型 微调 6、总结 1、迁移学习作用 定义&#xff1a;能在一个任务学习一个模型&#xff0c;然后用来解决相关的别的任务&#xff0c;这样我们在一个地方花…

深度学习基础知识 register_buffer 与 register_parameter用法分析

深度学习基础知识 register_buffer 与 register_parameter用法分析 1、问题引入2、register_parameter()2.1 作用2.2 用法 3、register_buffer()3.1 作用3.2 用法 1、问题引入 思考问题&#xff1a;定义的weight与bias是否会被保存到网络的参数中&#xff0c;可否在优化器的作用…

想用macbook录制视频?这几个技巧让你事半功倍!

在今天的数字时代&#xff0c;录制视频已经变得非常常见&#xff0c;无论是为了制作内容、演示、教育还是娱乐。如果您是一名macBook用户&#xff0c;您拥有一些强大的工具来满足您的视频录制需求。本文将向您介绍两种macbook录制视频的方法&#xff0c;帮助您更好地录制高质量…

SQL利用Case When Then多条件判断

CASE WHEN 条件1 THEN 结果1 WHEN 条件2 THEN 结果2 WHEN 条件3 THEN 结果3 WHEN 条件4 THEN 结果4 ......... WHEN 条件N THEN 结果N ELSE 结果X END Case具有两种格式。简单Case函数和Case搜索函数。 --简单Case函数 CASE sex WHEN 1 THEN…

东芝Z750的画质真实吗?适合看纪录片吗?

东芝Z750显示的画面更加真实、细腻、有层次感,就感觉电视中的画面像真实世界一般呈现在眼前,东芝电视拥有70余年的原色调校技术,每款产品都有专属的日本调校工程师匠心打造,可以真实还原画面色彩,若是观看类似《航拍中国》这样的旅游记录片时,东芝电视将会营造出万里山河的壮阔…

从0开始学go第五天

gin框架返回JSON package mainimport ("net/http""github.com/gin-gonic/gin" )func main() {r : gin.Default()r.GET("/json", func(c *gin.Context) {//用map序列化//方法一&#xff1a;用map&#xff0c;后面用接口类型// data : map[string…

利用人工智能做射击游戏辅助(二)AlphaPose环境配置

一、anaconda安装 官网地址&#xff1a;Free Download | AnacondaAnacondas open-source Distribution is the easiest way to perform Python/R data science and machine learning on a single machine.https://www.anaconda.com/download 下载之后下一步就可以&#xff0c…

谷歌云 | 零售行业的生成式 AI:如何跟上步伐并取得领先

【Cloud Ace 是 Google Cloud 全球战略合作伙伴&#xff0c;在亚太地区、欧洲、南北美洲和非洲拥有二十多个办公室。Cloud Ace 在谷歌专业领域认证及专业知识目前排名全球第一位&#xff0c;并连续多次获得 Google Cloud 各类奖项。作为谷歌云托管服务商&#xff0c;我们提供谷…

[Python]图片转字符画——这就是我的表情!!!!!!

背景 偶尔看到一些视频&#xff0c;他们把图片转字符画&#xff0c;平常也没有去关注&#xff0c;今天来捣鼓一下。 研究了一下还超级简单的&#xff0c;都是调用别人写好的框架。 网上也有很多教学。 代码实现 from PIL import Image # 表示字符颜色&#xff0c;由深到浅&am…

Redis 的过期键 | Navicat 技术干货

Redis 是一种高性能的内存数据存储&#xff0c;以其速度和多功能性而闻名。其中一个有用的特性是为键设置过期时间的功能。在 Redis 中&#xff0c;为键设置过期时间对于管理数据和确保过时或临时数据自动从数据库中删除是至关重要的。在本文中&#xff0c;我们将探讨在 redis-…

【AI】深度学习——前馈神经网络——全连接前馈神经网络

文章目录 1.1 全连接前馈神经网络1.1.1 符号说明超参数参数活性值 1.1.2 信息传播公式通用近似定理 1.1.3 神经网络与机器学习结合二分类问题多分类问题 1.1.4 参数学习矩阵求导链式法则更为高效的参数学习反向传播算法目标计算 ∂ z ( l ) ∂ w i j ( l ) \frac{\partial z^{…

应对广告虚假流量,app广告变现该如何风控?

移动广告市场中的虚假流量一直是困扰各移动应用厂商的难题&#xff0c;广告作为app商业化变现最为直接快捷的途径&#xff0c;也引申出了流量作弊与反作弊的纷争。 根据《2021中国异常流量报告》&#xff0c;2021年中国品牌广告市场因异常流量造成的损失约为326亿人民币&#…

用例图 UML从入门到放弃系列之三

1.说明 关于用例图&#xff0c;这篇文章我将直接照搬罗伯特.C.马丁老爷子在《敏捷开发》一书种的第17章&#xff0c;并配上自己的理解&#xff0c;因为这一章写的实在是太精彩了&#xff0c;希望能够分享给大家&#xff0c;共勉。以下是老爷子的原文中文翻译以及豆芽的个人解读…