Ant Design+react 表单只读

表单禁用,样式不好看,不符合甲方标准,看了一下文档,select、radio等都不支持只读状态。
解决方法:
利用css3的point-events属性,设置为none
在查看弹窗时,传入一个变量,当变量为true时,设置className样式,否则不作操作
point-events可以阻止点击事件的效果,以及鼠标指针显示
实现效果图:
在这里插入图片描述
鼠标点击不会有任何操作,也不会切换radio和select下拉
代码:

<Form.Item label="类型" name="questionType">//isCheckInfo是打开弹窗时传的变量,为true时是查看,需要加个样式,阻止鼠标事件<Radio.Group className={isCheckInfo?'read-only':''}><Radio.Button value={0}>一般问题</Radio.Button><Radio.Button value={1}>业务问题</Radio.Button></Radio.Group>
</Form.Item>
<Form.Item label="选择分组" required name="questionGroupId"><Select className={isCheckInfo?'read-only':''} options={[{ value: '0', label: '默认分组' }]} />
</Form.Item>

css

.read-only{pointer-events: none;
}

一行css解决!

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

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

相关文章

了解光隔离器和光耦合器:主要区别和应用

光隔离器和光耦合器是现代电子电路中必不可少的组件&#xff0c;提供一项关键功能&#xff1a;电路不同部分之间的电气隔离。虽然它们在许多方面相似且经常互换使用&#xff0c;但两者之间存在明显差异&#xff0c;主要基于它们的工作电压能力。本文深入探讨了这些组件的基础知…

最新23道vue2+vue3面试题带答案汇总

文章目录 MVVM与MVC的区别Vue 2与Vue 3的主要区别Vue 3的优势Vue 2 是如何实现数据绑定的&#xff1f;Vue 2 中的 v-model 是如何工作的&#xff1f;Vue 2 的生命周期钩子有哪些&#xff1f;Vue 3 使用了什么技术来实现响应式系统&#xff1f;Vue 3 中的 Composition API 带来了…

windows系统内查看电脑SN号

cmd命令行模式下&#xff0c;输入代码wmic bios get serialnumber可以查看到当前计算机的SN号码

探索网络回溯分析系统与业务性能监控:提升IT运维效率的关键

目录 一、网络回溯分析系统的作用与优势 二、业务性能监控的重要性 三、提升网络性能的技巧与建议 结论 在现代企业中&#xff0c;网络的稳定性和业务的连续性至关重要。为了确保网络性能最佳化和快速解决故障&#xff0c;网络回溯分析系统和业务性能监控工具成为了IT运维的…

Python爬取与可视化-豆瓣电影数据

引言 在数据科学的学习过程中&#xff0c;数据获取与数据可视化是两项重要的技能。本文将展示如何通过Python爬取豆瓣电影Top250的电影数据&#xff0c;并将这些数据存储到数据库中&#xff0c;随后进行数据分析和可视化展示。这个项目涵盖了从数据抓取、存储到数据可视化的整个…

记一次Linux下Docker镜像服务器磁盘空间清理

我们开发环境Jenkins构建项目时报服务器磁盘空间不足&#xff0c;导致项目自动化构建部署失败&#xff0c; Docker镜像服务器磁盘空间清理我们做了多次了&#xff0c;之前在清理Docker镜像服务器时走了不少弯路&#xff0c;查了不少Docker镜像服务器空间清理&#xff0c;都大同…

循环嵌套语句的实际应用(2)

3199&#xff1a;【例33.2】 两位数 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 4565 通过数: 2573 【题目描述】 现在有一个两位数&#xff0c;这个两位数十位上的数与个位上的数和为 &#x1d44e; &#xff0c;十位上的数与个位上的数差&#xff08;大减小…

JAVA网络编程,反射及注解知识总结

文章目录 网络编程软件架构三要素IP端口号协议UDP协议发送数据接收数据三种通信方式 TCP协议客户端服务器端三次握手四次挥手 反射获取字节码文件获取构造方法获取成员变量获取成员方法反射的作用 动态代理注解作用格式使用位置注解的原理常见注解元注解自定义注解解析注解 网络…

每台云服务器最多可支持几块硬盘

每台云服务器最多可支持的硬盘数量取决于不同的因素&#xff0c;包括服务器的技术规格、硬盘的类型和尺寸、服务器架构和供应商的政策等。 在一般情况下&#xff0c;大部分云服务器都有多个硬盘插槽&#xff0c;以支持并行连接多个硬盘。现代服务器通常提供SATA、SAS和NVMe等接…

自然语言处理(NLP)—— 语言检测器

1. 文章概述 1.1 目的 在本篇文章中&#xff0c;我们将构建一个语言检测器&#xff0c;这是一个能够识别文本语言的简单分类器。这是一个能够识别文本是用哪种语言写的程序。想象一下&#xff0c;你给这个程序一段文字&#xff0c;它就能告诉你这是英语、法语还是其他语言。 …

MySQL实体类框架

实现mysql数据库的增删改查功能 import com.mchange.v2.collection.MapEntry; import lombok.Data; import org.junit.jupiter.api.Test;import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.lang.reflect.*; import java.sql.*; …

返工 PCB 电路板的 6 个技巧

需要解决设计中的问题&#xff0c;例如&#xff1a; 您的原理图符号与 PCB 封装不一致&#xff08;这可能导致信号发送到错误的引脚&#xff09; 您选择了错误的电阻值。 你选择了错误的IC 您忘记在两个引脚之间进行必要的连接&#xff08;并且需要添加跳线&#xff09; 由…

Moonshot AI API使用(1)-获取MOONSHOT_API_KEY

Moonshot AI 开放平台 用户注册&#xff0c;使用微信扫码登录 把这个key复制下来

用你熟悉的语言就能开发智能合约,Vara Network 以 WASM 解锁未来应用创新

Vara Network 自推出以来&#xff0c;凭借其基于 Gear Protocol 的独特架构和强大的开发工具&#xff0c;为开发者提供了一个高效、安全的智能合约构建平台。Vara Network 通过采用先进的 Actor 模型、持久内存概念和 WebAssembly 技术&#xff0c;实现了异步消息处理、并行计算…

OpenFeign --学习笔记

什么是OpenFeign&#xff1f; OpenFeign可以想象成一座连接客户端&#xff08;服务器&#xff09;和服务器之间的桥梁。在微服务架构中&#xff0c;各个服务之间像小岛屿一样分布在网络上&#xff0c;它们需要相互通信才能协同工作。但是&#xff0c;这些岛屿之间并没有现成的…

CentOS 系统常用信息查询:CPU、内存、硬盘、系统运行时长等

CentOS 是基于 Red Hat Enterprise Linux&#xff08;RHEL&#xff09;源代码构建的&#xff0c;是一种流行的 Linux 操作系统。在 CentOS 中&#xff0c;我们可以通过一些命令来查询系统的各种常用信息&#xff0c;包括 CPU 使用情况、内存使用情况、硬盘容量、系统运行时长等…

SVNCloud 与 Navicat和IDEA的连接

文章目录 SVNCloud 配置Navicat访问云端数据库与IDEA Java jdbc 的连接 SVNCloud 配置 访问网址&#xff1a;SVN注册账号&#xff0c;进入mysql区域&#xff1a; 数据库管理->创建数据库&#xff0c;输入数据库名称和密码&#xff0c;注意&#xff0c;这里的数据库名称实际…

6、后端项目初始化

打开idea后&#xff0c; New Project &#xff0c;用Maven构建 Spring Boot 项目 点击Next后&#xff1a;先勾选两个基本的依赖&#xff0c;后面再手动添加其它需要的依赖 Spring Web: 表示是一个web应用程序 Lombok&#xff1a;写实体类的时候添加Data注解后就会自动加上g…

Linux网络编程:网络层协议|IP

目录 前言&#xff1a; 1.IP协议 1.1.IP协议格式 1.2.网段划分 1.2.1.知识引入 1.2.2.IP地址划分和子网掩码 1.3.IP地址分类 1.3.1.特殊IP地址 ​编辑 1.3.2.私有IP和公网IP 1.3.3.浅谈NAT技术 1.4.路由 1.4.1.什么是路由 1.4.2.路由表 1.5.网络层数据切片和组装…

MYSQL基础_01_数据库概述

第01章_数据库概述 1. 为什么要使用数据库 持久化(persistence)&#xff1a;把数据保存到可掉电式存储设备中以供之后使用。大多数情况下&#xff0c;特别是企业级应用&#xff0c;数据持久化意味着将内存中的数据保存到硬盘上加以”固化”&#xff0c;而持久化的实现过程大多…