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解决!

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

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

相关文章

React实战(一)初始化项目、配置router、redux、axios

(一)初始化项目 1.安装项目 npx create-react-app 项目名 编译报错&#xff1a; 解决办法&#xff1a;安装最新的babel-preset-react-app npm install babel-preset-react-applatest 2.配置项目 (1)配置文件目录 (2)使用craco配置webpack.config npm install craco/crac…

wx 生命周期

以下内容你不需要立马完全弄明白&#xff0c;不过以后它会有帮助。 下图说明了页面 Page 实例的生命周期。

spring源码解析-(1)关于Bean

什么是Bean&#xff1f; 是spring对所有注入到IoC容器中的类的统称。 我们要注册进入spirng的bean千奇百怪&#xff0c;所以spring必须需要使用一个统一的定义来标识bean&#xff0c;就有了接下来的BeandDefinition&#xff0c;通过名称我们就可以知道&#xff0c;他是对bean…

IEDA 默认依赖概述

IEDA 默认依赖概述 目录概述需求&#xff1a; 设计思路实现思路分析1.AI Azure OpenAlAzure Al SearchAmazon BedrockChroma Vector DatabaseMilvus Vector DatabaseMistral AlNeo4J Vector DatabaseOllamaOpenAlPGvector Vector DatabasePinecone Vector DatabasePostgresMLRe…

IM即时通信技术

本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl IM&#xff0c;即Instant Messaging&#xff0c;是指即时通讯技术&#xff0c;它允许用户通过互联网实时交换文本、语音、视频、文件等多种形式的信息。这种技术打破了传统通信方式的时…

MySQL提权之UDF提权

1、前言 最近遇到udf提权&#xff0c;几经周折终于搞懂了。感觉挺有意思的&#xff0c;渗透思路一下子就被打开了。 2、什么是udf提权 udf 全称为user defined function&#xff0c;意思是用户自定义函数。用户可以对数据库所使用的函数进行一个扩展&#xff08;windows利用…

[office] 如何在Excel中拉动单元格时表头不变形- #学习方法#职场发展#经验分享

如何在Excel中拉动单元格时表头不变形? 如何在Excel中拉动单元格时表头不变形&#xff1f;Excel是我们常用的办公软件&#xff0c;当我们使用Excel拉动单元格时表头不变形&#xff0c;该如何操作呢&#xff0c;下面小编就为大家做详细讲解 如何在Excel中拉动单元格时表头不变…

Vue02-搭建Vue的开发环境

一、Vue.js的安装 1-1、直接用 <script> 引入&#xff08;CDN&#xff09; 1、CDN的说明 2、Vue的版本说明 生产版本是开发版本的压缩。 3、Vue的引入 验证是否存在Vue函数&#xff1a; 4、搭建Vue的开发环境 ①、下载开发版本的Vue&#xff0c;并在代码中引入 ②、安…

【Linux】系统优化:一键切换软件源与安装Docker

引言 在Linux系统安装完成后&#xff0c;进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本&#xff1a;LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…

AB测试实战

AB测试实战 1、AB测试介绍&#x1f43e; 很多网站/APP的首页都会挂一张头图(Banner)&#xff0c;用来展示重要信息&#xff0c;头图是否吸引人会对公司的营收带来重大影响&#xff0c;一家寿险公司Humana设计了如下三张头图&#xff0c;现在需要决定使用哪一张放到首页&#x…

Java——JVM

前言 JVM.即Java虚拟机.用来解释执行Java字节码. 一、JVM中的内存区域划分 JVM其实也是一个进程,进程运行过程中,要从操作系统这里申请一些资源(内存就是其中的典型资源) 这些内存空间,就支撑了后续Java程序的执行. JVM从系统中申请了一大块内存,这一大块内存给Java程序使…

TOGAF数字化转型的关键(文尾附在线TOGAF免费测试)

业务架构驱动数据架构和应用架构的设计&#xff0c;而应用架构又依赖于数据架构和技术架构的支持。技术架构则为整个架构提供了稳定的基础设施。 在数字化转型中&#xff0c;协调和整合这四种架构是至关重要的。通过确保它们之间的一致性和协同工作&#xff0c;可以实现企业业务…

高效文件传输攻略:利用局域网共享实现极速数据同步

最近&#xff0c;我换了一台新电脑&#xff0c;面对两个电脑之间文件备份和传输的问题&#xff0c;感到十分头疼。经过多方了解&#xff0c;我发现可以在原电脑上设置共享文件&#xff0c;然后接收方从共享文件中接受即可&#xff0c;这样可以将局域网的带宽拉满&#xff0c;比…

力扣78. 子集

给你一个整数数组nums&#xff0c;数组中的元素互不相同。返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集不能包含重复的子集。你可以按任意顺序返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[1,2],[3],[1,3…

GIS数据快捷共享发布工具及操作视频

有网友反映还是不会操作GIS数据快捷共享发布工具&#xff08;建立自己的地图网站&#xff09;&#xff0c;要我录个视频。 好&#xff0c;那就录一个: GIS数据快捷共享发布工具及操作视频 虽然默认例子是二维的&#xff0c;但这个服务器可以为二维、三维系统发布时间服务。都是…

AI炒股:用kimi获取美股实时行情数据并保存到Excel

在kimi中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个编写Python脚本的任务&#xff0c;具体步骤如下&#xff1a; 获取美股实时美股行情数据&#xff0c;然后保存在F盘的Excel文件中&#xff0c;Excel文件名为&#xff1a;usstock20240605.xlsx 实…

物联网实战--平台篇之(十三)物模型设备端

本项目的交流QQ群:701889554 物联网实战--入门篇https://blog.csdn.net/ypp240124016/category_12609773.html 物联网实战--驱动篇https://blog.csdn.net/ypp240124016/category_12631333.html 物联网实战--平台篇https://blog.csdn.net/ypp240124016/category_12653350.htm…

存在d盘里的数据突然没有了?别担心,恢复方案在此

在数字化时代&#xff0c;数据存储的重要性不言而喻。然而&#xff0c;有时候我们会遭遇一些意想不到的困扰&#xff0c;比如存储在D盘的数据突然消失。这不仅可能导致重要文件的丢失&#xff0c;还可能影响我们的工作和生活。本文将探讨D盘数据消失的可能原因&#xff0c;提供…

【机器学习】与【数据挖掘】技术下【C++】驱动的【嵌入式】智能系统优化

目录 一、嵌入式系统简介 二、C在嵌入式系统中的优势 三、机器学习在嵌入式系统中的挑战 四、C实现机器学习模型的基本步骤 五、实例分析&#xff1a;使用C在嵌入式系统中实现手写数字识别 1. 数据准备 2. 模型训练与压缩 3. 模型部署 六、优化与分析 1. 模型优化 模…

OpenAI新研究破解GPT-4大脑,分解1600万个特征打开“黑匣子”,Ilya 、Jan Leike也参与了!

6月7日凌晨&#xff0c;OpenAI在官网发布了一个新的研究成果&#xff0c;首次破解GPT-4的神经网络活动。通过改进大规模训练稀疏自动编码器将GPT-4的内部表示分解为 1600 万个特征。而且&#xff0c;前段时间离职的Ilya Sutskever、Jan Leike也是作者之一&#xff01; 这不是破…