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

使用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;
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【deepseek】deepseek-r1本地部署-第一步:下载LM Studio

要下载LM Studio&#xff0c;可以按照以下步骤进行&#xff1a; 一、访问LM Studio官方网站 打开必应&#xff08;注意&#xff01;百度无法打开官网&#xff09;&#xff0c;输入LM Studio的官方网址&#xff1a;LM Studio - Discover, download, and run local LLMs。进入L…

爬虫基础之爬取某基金网站+数据分析

声明: 本案例仅供学习参考使用&#xff0c;任何不法的活动均与本作者无关 网站:天天基金网(1234567.com.cn) --首批独立基金销售机构-- 东方财富网旗下基金平台! 本案例所需要的模块: 1.requests 2.re(内置) 3.pandas 4.pyecharts 其他均需要 pip install 模块名 爬取步骤: …

Day27-【13003】短文,什么是栈?栈为何用在递归调用中?顺序栈和链式栈是什么?

文章目录 第三章栈和队列总览第一节栈概览栈的定义及其基本操作如何定义栈和栈的操作&#xff1f;合理的出栈序列个数如何计算&#xff1f;栈的两种存储方式及其实现&#xff1f;顺序栈及其实现&#xff0c;还有对应时间复杂度*、清空栈&#xff0c;初始化栈5、栈空&#xff0c…

Linux:多线程 [1]概念理解

char *str "hello bfr"; *str "H"; "hello bfr"这个字符串存储在虚拟地址空间的代码区中&#xff0c;令str指向它之后当要修改*str时&#xff0c;也就是修改代码区中"hello bfr"位置的值&#xff0c;再将它通过页表映射成物理内存时…

electron typescript运行并设置eslint检测

目录 一、初始化package.json 二、安装依赖 1、安装electron 2、安装typescript依赖 3、安装eslint 三、项目结构 四、配置启动项 一、初始化package.json 我的&#xff1a;这里的"main"没太大影响&#xff0c;看后面的步骤。 {"name": "xlo…

国内优秀的FPGA设计公司主要分布在哪些城市?

近年来&#xff0c;国内FPGA行业发展迅速&#xff0c;随着5G通信、人工智能、大数据等新兴技术的崛起&#xff0c;FPGA设计企业的需求也迎来了爆发式增长。很多技术人才在求职时都会考虑城市的行业分布和发展潜力。因此&#xff0c;国内优秀的FPGA设计公司主要分布在哪些城市&a…

基于微信小程序的电子竞技信息交流平台设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

在亚马逊云科技上用Stable Diffusion 3.5 Large生成赛博朋克风图片(下)

背景介绍 在2024年的亚马逊云科技re:Invent大会上提前预告发布的Stable Diffusion 3.5 Large&#xff0c;现在已经在Amazon Bedrock上线了&#xff01;各位开发者们现在可以使用该模型&#xff0c;根据文本提示词文生图生成高质量的图片&#xff0c;并且支持多种图片风格生成&…

【自学嵌入式(6)天气时钟:软硬件准备、串口模块开发】

天气时钟&#xff1a;软硬件准备、串口模块开发 软硬件准备接线及模块划分ESP8266开发板引脚图软件准备 串口模块编写串口介绍Serial库介绍 近期跟着网上一些教学视频&#xff0c;编写了一个天气时钟&#xff0c;本篇及往后数篇都将围绕天气时钟的制作过程展开。本文先解决硬件…

初始JavaEE篇 —— Spring Web MVC入门(上)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 RequestMappingg 注解介绍 Postman的介绍与使用 PostMapping 与 GetMapping 注解 构造并接收请求 接收简单参数 接收对象…

浅谈Unity中Canvas的三种渲染模式

Overview UGUI通过 Canvas 组件渲染和管理UI元素。Canvas 是 UI 元素的容器&#xff0c;它决定了 UI 元素的渲染方式以及它们在屏幕上的显示效果。Canvas 有三种主要的渲染模式&#xff0c;每种模式有不同的用途和特点。本文将介绍这三种渲染模式 1. Screen Space - Overlay 模…

C++17 std::variant 详解:概念、用法和实现细节

文章目录 简介基本概念定义和使用std::variant与传统联合体union的区别 多类型值存储示例初始化修改判断variant中对应类型是否有值获取std::variant中的值获取当前使用的type在variant声明中的索引 访问std::variant中的值使用std::get使用std::get_if 错误处理和访问未初始化…

NoteGen:记录、写作与AI融合的跨端笔记应用

在信息爆炸的时代,如何高效地捕捉灵感、整理知识并进行创作成为了许多人关注的问题。为此,我们开发了 NoteGen,一款专注于记录和写作的跨端 AI 笔记应用。它基于 Tauri 开发,利用其强大的跨平台能力支持 Mac、Windows 和 Linux 系统,并计划未来扩展到 iOS 和 Android 平台…

SET alter system reload

目录标题 alter system 只是 写 auto 文件SET & alter system1. **会话级别参数&#xff08;Session-level parameters&#xff09;**2. **系统级别参数&#xff08;System-level parameters&#xff09;**3. **某些特定的超级用户参数**4. **修改时生效的参数**总结&#…

Ubuntu20.04 磁盘空间扩展教程

Ubuntu20.04 磁盘空间扩展教程_ubuntu20 gpart扩容-CSDN博客文章浏览阅读2w次&#xff0c;点赞38次&#xff0c;收藏119次。执行命令查看系统容量相关的数据&#xff1a;df -h当前容量为20G&#xff0c;已用18G&#xff08;96%&#xff09;&#xff0c;可用844M&#xff0c;可用…

无心剑七绝《除夕快乐》

七绝除夕快乐 除旧迎新瑞气扬 夕阳烂漫映红妆 快言美酒佳肴味 乐享天伦福满堂 2025年1月28日 平水韵七阳平韵 无心剑这首七绝以“除夕快乐”为题&#xff0c;巧妙地运用了藏头手法&#xff0c;将“除夕快乐”四字分别嵌入诗的每一句首字&#xff0c;构思精巧&#xff0c;富有新…

WebSocket 详解:全双工通信的实现与应用

目录 一、什么是 WebSocket&#xff1f;&#xff08;简介&#xff09; 二、为什么需要 WebSocket&#xff1f; 三、HTTP 与 WebSocket 的区别 WebSocket 的劣势 WebSocket 的常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 一、什么是 WebSocket&#xf…

机器人抓取与操作概述(深蓝)——1

工业机器人&#xff1a;① “臂”的形态 ② “手”的形态 ③ 视觉&#xff0c;力和触觉 1 机器人的不同形态 “臂”的形态 “手”的形态 2 常见的操作任务 操作&#xff1a;插入、推和滑 抓取&#xff1a;两指&#xff08;平行夹爪&#xff09;抓取、灵巧手抓取 落地-产…

人物传记之新月篇

相关故事链接&#xff08;及时更新&#xff09;&#xff1a;Python的那些事第四篇&#xff1a;编程中的智慧之光控制结构-CSDN博客 目录 1. C语言程序&#xff1a;增强版加密与解密工具 2. Python程序&#xff1a;增强版加密与解密工具 功能对比表格 详细功能解释 人物传记…

Tensor 基本操作4 理解 indexing,加减乘除和 broadcasting 运算 | PyTorch 深度学习实战

前一篇文章&#xff0c;Tensor 基本操作3 理解 shape, stride, storage, view&#xff0c;is_contiguous 和 reshape 操作 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started Tensor 基本使用 索引 indexing示例代码 加减…