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

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

实现效果布局如下图

代码

<Formname="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.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"1111"}/>)}</Form.Item></span>级(一至四),S<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"112222"}/>)}</Form.Item></span>A<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="level-select"noStyle={true}options={confidentialLevelNumberDict as optionsDict[]}disabled={getFieldValue("isConfirm") === 2}name={"11223333"}/>)}</Form.Item></span>G<span onClick={eventPrevent}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isKey !==(currentValues as any)?.isKey}>{({ getFieldValue }) => (<FormItemSelectclassName="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.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemInputnoStyle={true}disabled={getFieldValue("isConfirm") === 1}name={"33666"}/>)}</Form.Item></Space></span></div></Radio><Radio value={2}><Space wrap>未定级,本次密评依据GB/T 39786—2021《信息安全技术信息系统密码应用基本要求》第<spanonClick={(e) => {e.stopPropagation();e.preventDefault();}}><Form.ItemnoStyleshouldUpdate={(prevValues, currentValues) =>(prevValues as any)?.isConfirm !==(currentValues as any)?.isConfirm}>{({ getFieldValue }) => (<FormItemSelectnoStyle={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.mzph.cn/bicheng/69134.shtml

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

相关文章

11 蚂蚁链技术特性

概览 蚂蚁链通过引入P2P网络、共识算法、虚拟机、智能合约、密码学、数据存储等技术特性&#xff0c;构建一个稳定、高效、安全的图灵完备智能合约执行环境&#xff0c;提供账户的基本操作以及面向智能合约的功能调用。 区块结构 一个区块包含区块头和区块体&#xff0c;区块…

【C++高并发服务器WebServer】-5:内存映射与进程通信

本文目录 一、内存映射与进程通信二、匿名映射与进程通信 一、内存映射与进程通信 内存映射Memory-mapped I/O指的是将磁盘文件的数据映射到内存&#xff0c;用户通过修改内存就能够修改磁盘文件&#xff0c;如下图所示&#xff08;进程地址空间指的是虚拟地址空间&#xff09…

使用vscode + Roo Code (prev. Roo Cline)+DeepSeek-R1使用一句话需求做了个实验

摘要 使用vscode、Roo Code和deepseek-reasoner进行了一个实验&#xff0c;尝试使用一句话需求来生成小红书封面图片。工具根据需求提供了详细的架构方案&#xff0c;包括技术栈选择、核心模块划分、目录结构建议等。然后&#xff0c;工具自动化地完成了开发和测试&#xff0c;…

C语言初阶牛客网刷题—— JZ11 旋转数组的最小数字【难度:简单】

1. 题目描述 牛客网在线OJ链接 有一个长度为 n 的非降序数组&#xff0c;比如 [1,2,3,4,5] &#xff0c;将它进行旋转&#xff0c;即把一个数组最开始的若干个元素搬到数组的末尾&#xff0c;变成一个旋转数组&#xff0c;比如变成了 [3,4,5,1,2] &#xff0c;或者 [4,5,1,2,3…

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

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

豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”

&#x1f31f; 嗨&#xff0c;我是LucianaiB&#xff01; &#x1f30d; 总有人间一两风&#xff0c;填我十万八千梦。 &#x1f680; 路漫漫其修远兮&#xff0c;吾将上下而求索。 豆包MarsCode 蛇年编程大作战 | &#x1f40d; 蛇年运势预测 在线体验地址&#xff1a;蛇年…

【转帖】eclipse-24-09版本后,怎么还原原来版本的搜索功能

【1】原贴地址&#xff1a;eclipse - 怎么还原原来版本的搜索功能_eclipse打开类型搜索类功能失效-CSDN博客 https://blog.csdn.net/sinat_32238399/article/details/145113105 【2】原文如下&#xff1a; 更新eclipse-24-09版本后之后&#xff0c;新的搜索功能&#xff08;CT…

macos的图标过大,这是因为有自己的设计规范

苹果官方链接&#xff1a;App 图标 | Apple Developer Documentation 这个在官方文档里有说明&#xff0c;并且提供了sketch 和 ps 的模板。 figma还提供了模板&#xff1a; Figma

C++异步future

&#x1f30e; C11异步futrue 文章目录&#xff1a; C11异步futrue future介绍     应用场景     future操作       std::async函数模版       std::packaged_task类模版       std::promise类模版 &#x1f680;future介绍 std::future是C11标准库…

洛谷 P2846 [USACO08NOV] Light Switching G C语言

题目描述 Farmer John tries to keep the cows sharp by letting them play with intellectual toys. One of the larger toys is the lights in the barn. Each of the N(2≤N≤105) cow stalls conveniently numbered 1…N has a colorful light above it. At the beginnin…

批量创建ES索引

7.x from elasticsearch import Elasticsearch# 配置 Elasticsearch 连接 # 替换为你的 Elasticsearch 地址、端口、用户名和密码 es Elasticsearch([http://10.10.x.x:43885],basic_auth(admin, XN272G9THEAPYD5N5QORX3PB1TSQELLB) )# # 测试连接 # try: # # 尝试获取集…

大厂案例——腾讯蓝鲸DevOps类应用的设计与实践

蓝鲸体系架构图 蓝鲸CICD应用功能架构 降低DEVOPS门槛—开发者中心 CICD应用需要的后台服务 系列阅读 12306亿级流量架构分析&#xff08;史上最全&#xff09;实现电商平台从业务到架构的治理体系基于主数据驱动的数据治理什么时候需要分表分库&#xff1f;-CSDN博客

React和Vue有什么区别,如何选择?

React和Vue有什么区别&#xff0c;如何选择&#xff1f; React 和 Vue 是当前最受欢迎的前端框架之一&#xff0c;两者在开发者中都有极高的声誉。它们都旨在帮助开发人员构建用户界面&#xff0c;但在实现方式和适用场景上有所不同。如果你正考虑在项目中选择 React 或 Vue&a…

uart、iic、spi通信总线

一、uart uart一种异步串行通信协议&#xff0c;用于在两个设备之间传输数据。它将数据按位发送&#xff0c;不需要时钟信号进行同步。在uart通信中&#xff0c;数据通过两根线路传输&#xff1a;发送线&#xff08;TX&#xff09;和接收线&#xff08;RX&#xff09;。它主要用…

LMI Gocator GO_SDK VS2019引用配置

LMI SDK在VS2019中的引用是真的坑爹,总结一下经验,希望后来的人能少走弯路.大致内容如下: &#xff08;1&#xff09; 环境变量 &#xff08;2&#xff09;C/C 附加包含目录 E:\GWQ\Gocator\GO_SDK\Gocator\GoSdk E:\GWQ\Gocator\GO_SDK\Platform\kApi &#xff08;3&#…

QT QTableWidget控件 全面详解

本系列文章全面的介绍了QT中的57种控件的使用方法以及示例,包括 Button(PushButton、toolButton、radioButton、checkBox、commandLinkButton、buttonBox)、Layouts(verticalLayout、horizontalLayout、gridLayout、formLayout)、Spacers(verticalSpacer、horizontalSpacer)、…

C# OpenCV机器视觉:红外体温检测

在一个骄阳似火的夏日&#xff0c;全球却被一场突如其来的疫情阴霾笼罩。阿强所在的小镇&#xff0c;平日里熙熙攘攘的街道变得冷冷清清&#xff0c;人们戴着口罩&#xff0c;行色匆匆&#xff0c;眼神中满是对病毒的恐惧。阿强作为镇上小有名气的科技达人&#xff0c;看着这一…

立创开发板入门ESP32C3第八课 修改AI大模型接口为deepseek3接口

#原代码用的AI模型是minimax的API接口&#xff0c;现在试着改成最热门的deepseek3接口。# 首先按理解所得&#xff0c;在main文件夹下&#xff0c;有minimax.c和minimax.h, 它们是这个API接口的头文件和实现文件&#xff0c;然后在main.c中被调用。所以我们一步步更改。 申请…

2025.1.21——六、BUU XSS COURSE 1 XSS漏洞|XSS平台搭建

题目来源&#xff1a;buuctf BUU XSS COURSE 1 目录 一、打开靶机&#xff0c;整理信息 二、解题思路 step 1&#xff1a;输入框尝试一下 step 2&#xff1a;开始xss注入 step 3&#xff1a;搭建平台 step 4&#xff1a;利用管理员cookie访问地址 三、小结 二编&#…

操作无法完成,因为文件已经在Electronic Team Virtual Serial Port Driver Service中打开

报错 操作无法完成,因为文件已经在Electronic Team Virtual Serial Port Driver Service中打开 现象 这个exe文件无法删除 解决办法 按下WinR, 找到Electronic Team Virtual Serial Port Driver Service,右击停止. 再次尝试删除,发现这个exe文件成功删除!