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

news/2025/1/24 19:25:05/

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

实现效果布局如下图

代码

javascript"><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>
javascript">const eventPrevent = (event: any) => {event.preventDefault();event.stopPropagation();
};export { eventPrevent };.level-select {width: 84px !important;
}

http://www.ppmy.cn/news/1565858.html

相关文章

利用MetaNeighbor验证重复性和跨物种分群

进行跨物种研究时&#xff0c;我们经常需要进行注释结果的比较和归类&#xff0c;或者同一物种不同样本之间的注释验证。R语言中有一个包就可以利用直观的热图展示这一需求。 导入包和环境 library(Seurat) library(ggplot2) library(MetaNeighbor) library(SingleCellExperi…

【LeetCode100】--- 寻找重复数

题目传送门 方法一&#xff1a;暴力解法&#xff08;超时&#xff09; 算法原理 双重循环&#xff0c;每次固定一个数&#xff0c;再遍历别的数。比较这两个数是否相等&#xff0c; 若相等则返回这个数。就是重复数。 复杂度分析 时间复杂度&#xff1a;O&#xff08;N方&…

【Flutter】platform_view之AppKitView在哪个flutter版本添加的

通过一下文件对比判断哪个版本添加的 已添加&#xff1a; https://github.com/flutter/flutter/blob/3.16.0/packages/flutter/lib/src/widgets/platform_view.dart https://github.com/flutter/flutter/blob/3.15.0-0.0.pre/packages/flutter/lib/src/widgets/platform_vie…

2025春招 SpringCloud 面试题汇总

大家好&#xff0c;我是 V 哥。SpringCloud 在面试中属于重灾区&#xff0c;不仅是基础概念、组件细节&#xff0c;还有高级特性、性能优化&#xff0c;关键是项目实践经验的解决方案&#xff0c;都是需要掌握的内容&#xff0c;正所谓打有准备的仗&#xff0c;秒杀面试官&…

Moretl FileSync增量文件采集工具

永久免费: <下载> <使用说明> 我们希望Moretl FileSync是一款通用性很好的文件日志采集工具,解决工厂环境下,通过共享目录采集文件,SMB协议存在的安全性,兼容性的问题. 同时,我们发现工厂设备日志一般为增量,为方便MES,QMS等后端系统直接使用数据,我们推出了增量采…

基于java的客户信息管理系统

摘 要 随着计算机的不断发展和进步&#xff0c;无论是大企业还是小企业&#xff0c;管理客户信息的重要性日益突出&#xff0c;企业需要有一个完善的系统管理。 本系统设计的目的是实现企业客户信息的管理&#xff0c;可以利用先进的计算机技术和网络技术来改变企业客户信息管…

Django 的 `Meta` 类和外键的使用

Django 的 Meta 类和外键的使用 1. Meta 类的常用选项2. 外键&#xff08;ForeignKey&#xff09;字段的使用2.1 基本用法2.2 ForeignKey 参数2.3 外键删除选项&#xff08;on_delete&#xff09; 3. 外键和查询3.1 获取作者的所有书籍3.2 通过书籍查找作者3.3 使用 select_rel…

iOS UIScrollView的一个特性

1如果UIScrollView 的contentSize.height > scrollView.bounds.size.height - scrollView.contentInset.top - scrollView.contentInset.bottom &#xff0c; 则scrollView就可以滚动&#xff0c;否则无法滚动 并且最大的滚动范围就是 contentSize.height - &#xff08; s…