ant design form数组修改 关联展示

news2024/10/6 8:39:53

根据form 数组项修改关联其他选项

在这里插入图片描述
如图,在项目开发中,每个form中有多个产品,提货方式不同,有一个需要邮寄展示收货地址,否则不用展示

// An highlighted block
<Card 
                    title="产品信息" 
                    bordered={false}>
                    <Form.List name="productList" >
                            {(fields, {add, remove}) => (
                              <>
                                {fields.map((field) => (
                                    <Row  gutter={16} >
                                                {/* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 注意 -----start*/ }
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            label="产品名称"
                                                            {...field}
                                                            name={[field.name,"wuMiao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            {...field}
                                                            label="物料编号"
                                                            name={[field.name,"bianHao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                               
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                
                                                        <Form.Item 
                                                            {...field}
                                                            label="借用数量"
                                                            name={[field.name,"jNumber"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <InputNumber 
                                                              min={1} placeholder="请输入数量"
                                                              style={{width:'100%'}} />
                                                        </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>
                                                { /* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 -----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>
                {showAddress&&
                    <Card title="收货地址">
                        <Row  gutter={16}>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收货人"
                                    name="shouRen"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收货人手机"
                                    name="shouRenPhone"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收获地址"
                                    name="adress"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="邮编"
                                    name="youBian"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Card>
                }
                
                <Card>

其中的showAddress 变量需要根据上面的修改来进行更新,用到 Form 的onValuesChange方法
具体代码如下

// An highlighted block
 <Form
                form={form}
                name="basic"
               
                initialValues={{
                    remember: true,
                    productList:[{
                        bianHao:'',
                        wuMiao:'',
                        jNumber:'',
                        tType:'you',
                        }]
                }}
               
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                onValuesChange={onValuesChange}
                autoComplete="off"
                >
                //其中onValuesChange方法如下
                 /***
				    * @description: 表单数据更新 提货方式中有邮寄,就显示邮寄地址
				    * @param {value,allValues} {Object,Object}  
				    * value:当前修改的值,数组的话会有[undefined,{tType:'1'}]清空,allValues:为全部数据
				    * @Author: fangyuanyuan
				    * @Date: 2023-07-26 16:39:18
				    ***/
    const onValuesChange = (value,allValues) => {
        //判断当前修改的是不是提货方式
        let istType = 
                    value.hasOwnProperty('productList')&&value['productList']
                    .some(item=>item&&item.hasOwnProperty('tType')) 
        if(istType){
           setShowAddress(
                allValues.productList.filter(item=>item&&item.hasOwnProperty('tType'))
                .some(item=>item.tType=='you')
                )
        }
    }
                

欢迎指正,如有更好的方法,可以留言,共同进步

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

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

相关文章

VulnHub narak

一、信息收集 1.nmap扫描开发端口 2.扫描目录 利用dirb扫描目录 3.发现 /webdav目录 访问 WebDAV 基于 HTTP 协议的通信协议&#xff0c;在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法&#xff0c;使应用程序可对Web Server直接读写&#xff0c;并支持写文件锁…

vue3源码解析

vue3源码解析与前端网络安全 VUE 3 拓展 vue3 对比 vue2 响应式数据 vue2 的响应式数据是通过 Object.defineProperty 进行数据劫持&#xff0c;其存在一些缺点&#xff1a; 必须要预知劫持的 key 是什么&#xff0c;并不能很好的监听到对象属性的添加、删除&#xff1b;初…

家政服务行业怎么做微信小程序开发

随着科技的不断发展&#xff0c;微信小程序已经成为了人们生活中不可或缺的一部分。在家政服务领域&#xff0c;微信小程序也发挥出了重要的作用。本文将探讨家政服务在微信小程序上可以实现的功能。 一、展示家政服务信息 微信小程序可以作为一个展示家政服务的平台&#xff…

XML外部实体注入攻击XXE

xml是扩展性标记语言&#xff0c;来标记数据、定义数据类型&#xff0c;是一种允许用户对自己的标记语言进行定义的源语言。XML文档结构包括XML声明、DTD文档类型定义&#xff08;可选&#xff09;、文档元素&#xff0c;一般无法直接打开&#xff0c;可以选择用excl或记事本打…

虚拟桌宠模拟器:VPet-Simulator,一个开源的桌宠软件, 可以内置到任何WPF应用程序

虚拟桌宠模拟器&#xff1a;VPet-Simulator&#xff0c;一个开源的桌宠软件, 可以内置到任何WPF应用程序 虚拟桌宠模拟器 一个开源的桌宠软件, 可以内置到任何WPF应用程序 获取虚拟桌宠模拟器 OnSteam(免费) 或 通过[Nuget]内置到你的WPF应用程序 1.虚拟桌宠模拟器 详细介绍 …

2023 10月2日 至 10 月8日学习总结

学了半天 想了还是需要进行个总结 1.做的题目 NSSCTF [BJDCTF 2020]easy_md5 md5实现sql-CSDN博客 [网鼎杯 2020 白虎组]PicDown python反弹shell proc/self目录的信息_双层小牛堡的博客-CSDN博客 [CISCN2019 华北赛区 Day1 Web5]CyberPunk 二次报错注入_双层小牛堡的博客-…

XPS表征(工作原理与特点)-科学指南针

在做 X 射线光电子能谱(XPS)测试时&#xff0c;科学指南针检测平台工作人员在与很多同学沟通中了解到&#xff0c;好多同学仅仅是通过文献或者师兄师姐的推荐对XPS有了解&#xff0c;但是对于XPS测试原理还属于小白阶段&#xff0c;针对此&#xff0c;科学指南针检测平台团队组…

Laya3.0 入门教程

点击play箭头 点击右边的开发者工具 就会弹出 chrome的调试窗口 然后定位到你自己的ts文件 直接在ts里断点即可 不需要js文件 如何自动生成代码&#xff1f; 比如你打开一个新项目 里面显示的是当前场景 只需要点击 UI运行时 右边的框就可以了 他会自动弹窗提示你 创建一个文…

iNet Network Scanner for Mac,轻松管理网络

iNet Network Scanner for Mac是一款强大的网络扫描工具&#xff0c;能够帮助你轻松管理和监控网络设备。 无论你是个人用户还是企业管理员&#xff0c;iNet Network Scanner都能为你提供全面而方便的网络管理体验。它可以快速扫描并识别局域网中的所有设备&#xff0c;包括电…

竞赛选题 深度学习 机器视觉 人脸识别系统 - opencv python

文章目录 0 前言1 机器学习-人脸识别过程人脸检测人脸对其人脸特征向量化人脸识别 2 深度学习-人脸识别过程人脸检测人脸识别Metric Larning 3 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习 机器视觉 人脸识别系统 该项目…

主机加固,防勒索病毒

​近年来&#xff0c;计算机以及互联网应用在中国得到普及和发展&#xff0c;已经深入到社会每个角落&#xff0c;政府&#xff0c;经济&#xff0c;军事&#xff0c;社会&#xff0c;文化和人们生活等各方面都越来越依赖于计算机和网络&#xff0c;电子政务&#xff0c;无纸办…

Flutter的Platform介绍-跨平台开发,如何根据不同平台创建不同UI和行为

文章目录 Flutter跨平台概念介绍跨平台开发平台相关性Platform ChannelPlatform-specific UIPlatform Widgets 如何判断当前是什么平台实例 Platform 类介绍获取当前平台的名称检查当前平台其他属性 利用flutter设计跨Android和IOS平台应用的技巧1. 遵循平台的设计准则2. 使用平…

Numpy Notes

np.linalg.norm() Matrix or vector norm return one of eight different matrix norms, or one of an infinite number of vector norms (described below), depending on the value of the ord parameter. np.linalg.norm() 用于求范数linalg : linear(线性) algebra(代数…

修改ubuntu服务器fs文件最大打开数

起因 在对项目进行压测的时候&#xff0c;请求异常 java.net.SocketException: socket closed&#xff0c;查看nginx代理服务器的日志。tail -f -n500 /var/log/nginx/error.log 显示 文件打开数太多socket() failed (24: Too many open files) while connecting to upstream …

新手小白教程之 圈X-QuantumultX i茅台自动预约教程

注意 本教程需要提前准备好BoxJS&#xff0c;QX最新版。 脚本作者onz3v 学习交流频道 https://pd.qq.com/s/2v3a5vkmj 第一步 配置QX 我们使用编辑配置文件&#xff0c;来配置脚本。 打开QX&#xff0c;点击左下角配置文件图标。 在rewrite_local输入以下代码 https://a…

基于小波神经网络的网络流量预测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022A 3.部分核心程序 ........................................................... %% 总流量数据 input(:,1)dat…

Hive - 检查分区 partition 是否存在

目录 一.引言 二.检查最新分区 三.检查任意分区 四.总结 一.引言 国庆期间任务因为某个 hive 表分区未成功创建&#xff0c;导致后续任务异常&#xff0c;为此也是苦逼的 6 点起床修复 bug。发生异常对应表的正常分区如下图所示&#xff0c;为 dt、hour 双分区: 为了保证后…

c++视觉处理---cv::Sobel()`算子

cv::Sobel()算子 cv::Sobel()是OpenCV库中的函数之一&#xff0c;用于计算图像的Sobel梯度。Sobel梯度是一种常用的图像处理技术&#xff0c;用于检测图像中的边缘和轮廓。 以下是cv::Sobel()函数的一般用法和参数&#xff1a; void cv::Sobel(cv::InputArray src, //…

C++ 获取文件创建时间、修改时间、大小等属性

简介 获取文件创建时间、修改时间、大小等属性 代码 #include <iostream> #include <string.h> #include <time.h>void main() {std::string filename "E:\\LiHai123.txt";struct _stat stat_buffer;int result _stat(filename.c_str(), &s…

2023年中国叉车租赁行业现状分析:设备价格昂贵,租赁市场需求增长[图]

叉车租赁行业是指专门提供叉车租赁服务的行业。叉车是一种用于搬运、装卸和堆垛物品的机械设备&#xff0c;广泛应用于仓储、物流、建筑、制造业等领域。由于购买叉车需要较高的成本投入&#xff0c;而且使用频率可能不高&#xff0c;许多企业和个人选择通过租赁叉车来满足短期…