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;区块…

如何使用 pytest-html 创建自定义 HTML 测试报告

关注开源优测不迷路 大数据测试过程、策略及挑战 测试框架原理&#xff0c;构建成功的基石 在自动化测试工作之前&#xff0c;你应该知道的10条建议 在自动化测试中&#xff0c;重要的不是工具 测试 Python 代码对于提高代码质量、检测漏洞或意外行为至关重要。 但测试结果又该…

【华为OD-E卷 - VLAN资源池 100分(python、java、c++、js、c)】

【华为OD-E卷 - VLAN资源池 100分&#xff08;python、java、c、js、c&#xff09;】 题目 VLAN是一种对局域网设备进行逻辑划分的技术&#xff0c;为了标识不同的VLAN&#xff0c;引入VLAN ID(1-4094之间的整数)的概念。 定义一个VLAN ID的资源池(下称VLAN资源池)&#xff0…

【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…

Coze,Dify,FastGPT,对比

在当今 AI 技术迅速发展的背景下&#xff0c;AI Agent 智能体成为了关键领域&#xff0c;Coze、Dify 和 FastGPT 作为其中的佼佼者&#xff0c;各有千秋。 平台介绍 - FastGPT&#xff1a;由环界云计算公司发起&#xff0c;是基于大语言模型&#xff08;LLM&#xff09;的开源…

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

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

【Docker】ubuntu中 Docker的使用

之前记录了 docker的安装 【环境配置】ubuntu中 Docker的安装&#xff1b; 本篇博客记录Dockerfile的示例&#xff0c;docker 的使用&#xff0c;包括镜像的构建、容器的启动、docker compose的使用等。   当安装好后&#xff0c;可查看docker的基本信息 docker info ## 查…

豆包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…

求平均年龄(信息学奥赛一本通-1059)

【题目描述】 班上有学生若干名&#xff0c;给出每名学生的年龄&#xff08;整数&#xff09;&#xff0c;求班上所有学生的平均年龄&#xff0c;保留到小数点后两位。 【输入】 第一行有一个整数n&#xff08;1≤n≤100&#xff09;&#xff0c;表示学生的人数。其后n行每行有…

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

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

C++ —— 智能指针 unique_ptr (上)

C —— 智能指针 unique_ptr &#xff08;上&#xff09; 普通指针的不足普通指针的释放智能指针智能指针 unique_ptr智能指针初始化错误用法get()方法返回裸指针智能指针不支持指针的运算&#xff08;、-、、- -&#xff09; 普通指针的不足 new和new [] 的内存需要用delete和…

C++异步future

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

# AI绘图中的Embedding、CLIP、Flux中的Clip与LCM SDXL加速生成解析

AI绘图中的Embedding、CLIP、Flux中的Clip与LCM SDXL加速生成解析 在现代AI绘图和深度学习中&#xff0c;涉及了多个复杂的概念和技术&#xff0c;这些技术在图像生成、训练加速以及多模态学习等方面起着至关重要的作用。在这篇博客中&#xff0c;我们将讨论几个关键概念&…

linux下jsoncpp编译

折腾了一顿&#xff0c;我使用ubuntu16.04编译的jsoncpp&#xff0c;由于使用的芯片工程需要16.04&#xff0c;无法使用最新的ubuntu系统。 发现jsoncpp编译时&#xff0c; CMake Error: Could not find CMAKE_ROOT !!! CMake has most likely not been installed correctly. …

洛谷 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博客