当前位置: 首页 > news >正文

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

相关文章:

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

使用Antd React Form使用Radio会遇到嵌套多个Select和Input的处理&#xff0c;需要多层嵌套和处理默认事件和冒泡&#xff0c;具体实现过程直接上代码。 实现效果布局如下图 代码 <Formname"basic"form{form}labelWrap{...formItemLayoutSpan(5, 19)}onFinish{on…...

Vue - toRefs() 和 toRef() 的使用

一、toRefs() 在 Vue 3 中,toRefs()可以将响应式对象的属性转换为可响应的 refs。主要用于在解构响应式对象时&#xff0c;保持属性的响应性。 1. 导入 toRefs 函数 import { toRefs } from vue;2. 将响应式对象的属性转换为 ref const state reactive({count: 0,message:…...

Python3 OS模块中的文件/目录方法说明九

一. 简介 前面文章简单学习了 Python3 中 OS模块中的文件/目录的部分函数。 本文继续来学习 OS 模块中文件、目录的操作方法&#xff1a;os.pipe() 方法、os.popen() 方法。 二. Python3 OS模块中的文件/目录方法 1. os.pipe() 方法 os.pipe() 方法用于创建一个管道, 返回…...

OpenCV文字绘制支持中文显示

OpenCV版本&#xff1a;4.4 IDE&#xff1a;VS2019 功能描述 OpenCV绘制文本的函数putText()不支持中文的显示&#xff0c;网上很多方法推荐的都是使用FreeType来支持&#xff0c;FreeType是什么呢&#xff1f;FreeType的官网上有介绍 FreeType官网 https://www.freetype.or…...

opengrok_windows_多工程环境搭建

目录 多工程的目录 工程代码下载和log配置 工程的索引 工程部署 工程测试 参考列表 多工程的目录 工程代码下载和log配置 工程代码下载 在每个工程的src目录下&#xff0c;下载工程代码&#xff0c;以下载pulseaudio的代码为例。 git clone gitgithub.com…...

基于ollama,langchain,springboot从零搭建知识库三【解析文档并存储到向量数据库】

安装环境 安装pgvector&#xff0c;先设置docker镜像源&#xff1a; vim /etc/docker/daemon.json {"registry-mirrors": ["https://05f073ad3c0010ea0f4bc00b7105ec20.mirror.swr.myhuaweicloud.com","https://mirror.ccs.tencentyun.com",&…...

Elasticsearch 和arkime 安装

安装一定要注意版本号&#xff0c;不然使用不了 这里Ubuntu使用ubuntu-20.04.6-desktop-amd64.iso elasticsearch这里使用Elasticsearch 7.17.5 | Elastic arkime这里使用wget https://s3.amazonaws.com/files.molo.ch/builds/ubuntu-20.04/arkime_3.4.2-1_amd64.deb 大家想…...

git回退

git回退 1、未使用 git add 缓存代码时 git checkout –- filepathname 放弃单个文件的修改 git checkout . 放弃所有的文件修改 此命令用来放弃掉所有还没有加入到缓存区&#xff08;就是 git add 命令&#xff09;的修改&#xff1a;内容修改与整个文件删除。但是此命令不…...

pytest+playwright落地实战大纲

前言 很久没有更新博客&#xff0c;是因为在梳理制作Playwright测试框架实战相关的课程内容。现在课程已经完结&#xff0c;开个帖子介绍下这门课程&#xff08;硬广, o(〃&#xff3e;▽&#xff3e;〃)o&#xff09; 课程放在CSDN学习频道&#xff0c; 欢迎关注~ PyTestPl…...

01-硬件入门学习/嵌入式教程-CH340C使用教程

前言 CH340C广泛应用于DIY项目和嵌入式开发中&#xff0c;用于USB数据转换和串口通信。本文将详细介绍CH340C的基本功能、引脚接线及使用方法。 CH340C简介 CH340C是一款USB转TTL电平转换器&#xff0c;可以将电脑的USB数据转换成串口数据&#xff0c;方便与单片机&#xff…...

小试牛刀调整Prompt,优化Token消耗

在上一篇文章 荒腔走板Mac电脑本地部署 LLM 中介绍过本地部署大模型之后&#xff0c;可以通过定制 prompt 来实现 domain 提取等各种各样的需求。 但是实际上&#xff0c;部署本地大模型 这种方式对于个人开发者来说实在是不太友好。一方面需要投入大量资金确保设备的算力足够支…...

snippets router pinia axios mock

文章目录 补充VS Code 代码片段注册自定义组件vue routerpinia删除vite创建项目时默认的文件axiosmock3.0.x版本的 viteMockServe 补充 为文章做补充&#xff1a;https://blog.csdn.net/yavlgloss/article/details/140063387 VS Code 代码片段 为当前项目创建 Snippets {&quo…...

Visual Studio2019调试DLL

1、编写好DLL代码之后&#xff0c;对DLL项目的属性进行设置&#xff0c;选择待注入的DLL&#xff0c;如下图所示 2、生成DLL文件 3、将DLL设置为启动项目之后&#xff0c;按F5启动调试。弹出选择注入的exe的界面之后&#xff0c;使用代码注入器注入步骤2中生成的dll&#xff0…...

深入解析:Docker 容器如何实现文件系统与资源的多维隔离?

目录 一、RootFs1. Docker 镜像与文件系统层2. RootFs 与容器隔离的意义 二、Linux Namespace1. 进程命名空间1.1 lsns 命令说明1.2 查看“祖先进程”命名空间1.3 查看当前用户进程命名空间 2. 容器进程命名空间2.1 查看容器进程命名空间列表2.2 容器进程命名空间的具体体现 三…...

vue项目中打包后的地址加载不出图片【五种解决方案】

在 Vue 项目中打包后&#xff0c;加载图片路径可能会出现问题&#xff0c;主要是因为打包后的路径与开发时的路径不同。为了确保图片可以正确加载&#xff0c;你可以考虑以下几种方法&#xff1a; 1. 使用 require 或 import 动态加载图片 如果你在 Vue 的模板或者脚本中引用…...

讯飞星火大模型将超越chatgpt?

讯飞星火大模型真的能超越ChatGPT吗? 在人工智能的世界里,新技术层出不穷,而科大讯飞最近发布的讯飞星火大模型3.0引发了不少讨论。有些人甚至大胆猜测:这个模型是否能够在某些方面超越如今广受欢迎的ChatGPT?今天,我们就来深入探讨一下这个话题,分析讯飞星火大模型3.0…...

3D Vision--计算点到平面的距离

写在前面 本文内容 计算点到平面的距离 平台/环境 python open3d 转载请注明出处&#xff1a; https://blog.csdn.net/qq_41102371/article/details/121482246 目录 写在前面准备Open3D代码完 准备Open3D pip install open3d代码 import open3d as o3ddef compute_points2…...

《开源与合作:驱动鸿蒙Next系统中人工智能技术创新发展的双引擎》

在当今科技飞速发展的时代&#xff0c;鸿蒙Next系统作为一款具有创新性和前瞻性的操作系统&#xff0c;为人工智能技术的发展提供了广阔的舞台。而开源和合作则是推动鸿蒙Next系统中人工智能技术创新和发展的两大关键引擎。 开源&#xff1a;创新的源泉 代码共享与知识传播&am…...

Java 高级工程师面试高频题:JVM+Redis+ 并发 + 算法 + 框架

前言 在过 2 个月即将进入 3 月了&#xff0c;然而面对今年的大环境而言&#xff0c;跳槽成功的难度比往年高了很多&#xff0c;很明显的感受就是&#xff1a;对于今年的 java 开发朋友跳槽面试&#xff0c;无论一面还是二面&#xff0c;都开始考验一个 Java 程序员的技术功底…...

【机器学习】嘿马机器学习(科学计算库)第11篇:Pandas,学习目标【附代码文档】

本教程的知识点为&#xff1a;机器学习&#xff08;常用科学计算库的使用&#xff09;基础定位 机器学习概述 机器学习概述 1.5 机器学习算法分类 1 监督学习 机器学习概述 1.7 Azure机器学习模型搭建实验 Azure平台简介 Matplotlib 3.2 基础绘图功能 — 以折线图为例 1 完善原…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus? 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么? 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...