Antd React Form使用Radio嵌套多个Select和Input的处理

news2025/1/27 4:14:35

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理,需要多层嵌套和处理默认事件和冒泡,具体实现过程直接上代码。

实现效果布局如下图

代码

<Form
    name="basic"
    form={form}
    labelWrap
    {...formItemLayoutSpan(5, 19)}
    onFinish={onFinish}
    autoComplete="off"
    >
    <Row gutter={gutterValue}>
        <Col span={24}>
             <Form.Item name="isConfirm" noStyle>
                <Radio.Group>
                  <Space direction="vertical">
                    <Radio value={1}>
                      <Space wrap>
                        已定级备案,第
                        <span onClick={eventPrevent}>
                          <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) =>
                              (prevValues as any)?.isConfirm !==
                              (currentValues as any)?.isConfirm
                            }
                          >
                            {({ getFieldValue }) => (
                              <FormItemSelect
                                className="level-select"
                                noStyle={true}
                                options={
                                  confidentialLevelNumberDict as optionsDict[]
                                }
                                disabled={getFieldValue("isConfirm") === 2}
                                name={"1111"}
                              />
                            )}
                          </Form.Item>
                        </span>
                        级(一至四),S
                        <span onClick={eventPrevent}>
                          <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) =>
                              (prevValues as any)?.isKey !==
                              (currentValues as any)?.isKey
                            }
                          >
                            {({ getFieldValue }) => (
                              <FormItemSelect
                                className="level-select"
                                noStyle={true}
                                options={
                                  confidentialLevelNumberDict as optionsDict[]
                                }
                                disabled={getFieldValue("isConfirm") === 2}
                                name={"112222"}
                              />
                            )}
                          </Form.Item>
                        </span>
                        A
                        <span onClick={eventPrevent}>
                          <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) =>
                              (prevValues as any)?.isKey !==
                              (currentValues as any)?.isKey
                            }
                          >
                            {({ getFieldValue }) => (
                              <FormItemSelect
                                className="level-select"
                                noStyle={true}
                                options={
                                  confidentialLevelNumberDict as optionsDict[]
                                }
                                disabled={getFieldValue("isConfirm") === 2}
                                name={"11223333"}
                              />
                            )}
                          </Form.Item>
                        </span>
                        G
                        <span onClick={eventPrevent}>
                          <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) =>
                              (prevValues as any)?.isKey !==
                              (currentValues as any)?.isKey
                            }
                          >
                            {({ getFieldValue }) => (
                              <FormItemSelect
                                className="level-select"
                                noStyle={true}
                                options={
                                  confidentialLevelNumberDict as optionsDict[]
                                }
                                disabled={getFieldValue("isConfirm") === 2}
                                name={"11255555"}
                              />
                            )}
                          </Form.Item>
                        </span>
                      </Space>
                      <div className="mt-4">
                        <span onClick={eventPrevent}>
                          <Space>
                            备案证明编号:
                            <Form.Item
                              noStyle
                              shouldUpdate={(prevValues, currentValues) =>
                                (prevValues as any)?.isConfirm !==
                                (currentValues as any)?.isConfirm
                              }
                            >
                              {({ getFieldValue }) => (
                                <FormItemInput
                                  noStyle={true}
                                  disabled={getFieldValue("isConfirm") === 1}
                                  name={"33666"}
                                />
                              )}
                            </Form.Item>
                          </Space>
                        </span>
                      </div>
                    </Radio>
                    <Radio value={2}>
                      <Space wrap>
                        未定级,本次密评依据GB/T 39786—2021《信息安全技术
                        信息系统密码应用基本要求》第
                        <span
                          onClick={(e) => {
                            e.stopPropagation();
                            e.preventDefault();
                          }}
                        >
                          <Form.Item
                            noStyle
                            shouldUpdate={(prevValues, currentValues) =>
                              (prevValues as any)?.isConfirm !==
                              (currentValues as any)?.isConfirm
                            }
                          >
                            {({ getFieldValue }) => (
                              <FormItemSelect
                                noStyle={true}
                                className="level-select"
                                options={
                                  confidentialLevelNumberDict as optionsDict[]
                                }
                                disabled={getFieldValue("isConfirm") === 1}
                                name={"77777"}
                              />
                            )}
                          </Form.Item>
                        </span>
                        级(一至四)信息系统要求
                      </Space>
                    </Radio>
                  </Space>
                </Radio.Group>
              </Form.Item>
         </Col>
      </Row>
</Form>
const eventPrevent = (event: any) => {
  event.preventDefault();
  event.stopPropagation();
};

export { eventPrevent };


.level-select {
   width: 84px !important;
}

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

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

相关文章

Linux(Centos、Ubuntu) 系统安装jenkins服务

该文章手把手演示在Linux系统下如何安装jenkins服务、并自定义jenkins数据文件位置、以及jenkins如何设置国内镜像源加速&#xff0c;解决插件下载失败问题 安装方式&#xff1a;war包安装 阿里云提供的war下载源地址&#xff1a;https://mirrors.aliyun.com/jenkins/war/?s…

【基于无线电的数据通信链】Link 11 仿真测试

〇、废话 Link 11 仿真测试 涉及多个方面&#xff0c;包括信号仿真、协议模拟、数据链路层的仿真以及网络性能评估等。Link 11 是一种基于 HF&#xff08;高频&#xff09; 或 UHF&#xff08;超高频&#xff09; 波段的无线通信协议&#xff0c;主要用于军事通信系统中。为了…

VScode 开发 Springboot 程序

1. 通过maven创建springboot程序 输入 mvn archetype:generate 选择模板&#xff0c;一般默认选择为第 7 种方式&#xff1b; 选择之后&#xff0c;一般要你填写如下内容&#xff1a; groupId: 组织名称&#xff1b;artifactId: 项目名称&#xff1b;version: 版本&#xff0…

深入MapReduce——引入

引入 前面我们已经深入了HDFS的设计与实现&#xff0c;对于分布式系统也有了不错的理解。 但HDFS仅仅解决了海量数据存储和读写的问题。要想让数据产生价值&#xff0c;一定是需要从数据中挖掘出价值才行&#xff0c;这就需要我们拥有海量数据的计算处理能力。 下面我们还是…

springfox-swagger-ui 3.0.0 配置

在3.0中&#xff0c;访问地址URL变了。 http://地址:端口/项目名/swagger-ui/ SpringBoot maven项目引入 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>3.0.0</version> </…

如何解压7z文件?8种方法(Win/Mac/手机/网页端)

7z 文件是一种高效的压缩文件格式&#xff0c;由 7 - Zip 软件开发者所采用。它运用独特的压缩算法&#xff0c;能显著缩小文件体积&#xff0c;便于存储与传输各类数据&#xff0c;像软件安装包、大型资料集等。但要使用其中内容&#xff0c;就必须解压&#xff0c;因为处于压…

Spring Boot 邂逅Netty:构建高性能网络应用的奇妙之旅

一、引言 在当今数字化时代&#xff0c;构建高效、可靠的网络应用是开发者面临的重要挑战。Spring Boot 作为一款强大的 Java 开发框架&#xff0c;以其快速开发、简洁配置和丰富的生态支持&#xff0c;深受广大开发者喜爱。而 Netty 作为高性能、异步的网络通信框架&#xff…

[STM32 - 野火] - - - 固件库学习笔记 - - -十一.电源管理系统

一、电源管理系统简介 电源管理系统是STM32硬件设计和系统运行的基础&#xff0c;它不仅为芯片本身提供稳定的电源&#xff0c;还通过多种电源管理功能优化功耗、延长电池寿命&#xff0c;并确保系统的可靠性和稳定性。 二、电源监控器 作用&#xff1a;保证STM32芯片工作在…

从 Web2 到 Web3:技术演进中的关键变革

随着互联网的快速发展&#xff0c;Web 技术经历了从 Web1 到 Web2&#xff0c;再到当前热议的 Web3 的演变。每一次技术迭代不仅仅是技术本身的升级&#xff0c;更代表着对社会、经济和文化的深刻影响。本文将带你走过 Web2 到 Web3 的技术演进&#xff0c;探讨其中的关键变革&…

Android实战经验篇-玩转Selinux(详解版)

列文章转如下链接&#xff1a; Android Display Graphics系列文章-汇总 Android实战经验篇-系列文章汇总 本文主要包括部分&#xff1a; 一、Selinux概述 1.1 SELinux是什么&#xff1f; 1.2 自主访问控制&#xff08;DAC&#xff09; 1.3 强制访问控制&#xff08;MAC&…

CLOUDFLARE代理请求重定向你太多次

现象 使用CLOUDFLARE代理前请求正常&#xff0c;使用CLOUDFLARE代理请求后出现 原因分析 以下是我的猜测&#xff0c;在默认情况下 CLOUDFLARE代理&#xff0c;可能是直接请求我们服务器的IP&#xff0c;比如&#xff1a;http://1.1.1.1 而不是通过域名的方式&#xff08;如…

U-Net - U型网络:用于图像分割的卷积神经网络

U-Net是一种专为图像分割任务设计的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;最初由Olaf Ronneberger等人于2015年提出。它被广泛应用于医学影像分析、遥感图像分割、自动驾驶和其他许多需要对图像进行像素级分类的任务中。U-Net具有强大的特征提取和恢复能力&…

第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

第十五届的题目在规定时间内做出了前5道&#xff0c;还有2道找时间再磨一磨。现在把做的一些思路总结如下&#xff1a; 题1&#xff1a;握手问题 问题描述 小蓝组织了一场算法交流会议&#xff0c;总共有 50人参加了本次会议。在会议上&#xff0c;大家进行了握手交流。按照惯例…

Vue3 + TS 实现批量拖拽 文件夹和文件 组件封装

一、html 代码&#xff1a; 代码中的表格引入了 vxe-table 插件 <Tag /> 是自己封装的说明组件 表格列表这块我使用了插槽来增加扩展性&#xff0c;可根据自己需求&#xff0c;在组件外部做调整 <template><div class"dragUpload"><el-dial…

DX12 快速教程(4) —— 画钻石原矿

快速导航 新建项目 "004-DrawTexture"纹理贴图纹理采样纹理过滤邻近点采样双线性过滤Mipmap 多级渐远纹理三线性过滤各向异性过滤 纹理环绕LOD 细节层次 开始画钻石原矿吧加载纹理到内存中&#xff1a;LoadTexture什么是 WIC如何用 WIC 读取一帧图片获取图片格式并转…

LBS 开发微课堂|AI向导接口服务:重塑用户的出行体验

为了让广大开发者 更深入地了解 百度地图开放平台的 技术能力 轻松掌握满满的 技术干货 更加简单地接入 位置服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第六期的主题是 《AI向导接口服务的能力与接入方案》 随着地图应…

mysql 学习3 SQL语句--整体概述。SQL通用语法;DDL创建数据库,查看当前数据库是那个,删除数据库,使用数据库;查看当前数据库有哪些表

SQL通用语法 SQL语句分类 DDL data definition language : 用来创建数据库&#xff0c;创建表&#xff0c;创建表中的字段&#xff0c;创建索引。因此成为 数据定义语言 DML data manipulation language 有了数据库和表以及字段后&#xff0c;那么我们就需要给这个表中 添加数…

【Bug 记录】el-sub-menu 第一次进入默认不高亮

项目场景&#xff1a; 项目场景&#xff1a;el-sub-menu 第一次进入默认不高亮 问题描述 例如&#xff1a;sub-menu 的 index 后端默认传过来是 number&#xff0c;我们需要手动转为 string&#xff0c;否则会有警告&#xff0c;而且第一次进入 sub-menu 默认不高亮。 解决方…

深入探讨ncnn::Mat类——ncnn中的核心数据结构

最近在学习 ncnn 推理框架&#xff0c;下面整理了 ncnn::Mat 的使用方法。 ncnn作为一个高性能的神经网络推理框架&#xff0c;其核心数据结构ncnn::Mat在数据存储与处理上扮演了至关重要的角色。本文将从基础到高级&#xff0c;详细介绍ncnn::Mat类的各个方面&#xff0c;帮助…

npm:升级自身时报错:EBADENGINE

具体报错信息如下&#xff1a; 1.原因分析 npm和当前的node版本不兼容。 // 当前实际版本: Actual: {"npm":"10.2.4","node":"v20.11.0"}可以通过官网文档查看与自己 node 版本 兼容的是哪一版本的npm&#xff0c;相对应进行更新即可…