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号码

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

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

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

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

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

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

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

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

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;这些岛屿之间并没有现成的…

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;而持久化的实现过程大多…

三招搞定“找不到msvcp140.dll无法继续执行代码”问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到msvcp140.dll”。那么&#xff0c;这个错误提示到底是什么意思呢&#xff1f;又该如何解决这个问题呢&#xff1f;本文将从以下几个方面进行详细阐述。 一&#xff0c;msvcp140.dll文…

如何轻松将Android同步到 PC? 【6个最适合你的方法!】

尽管许多Android手机都配备了充足的数据存储空间&#xff0c;但将手机中的重要数据备份到电脑上始终是明智之举&#xff0c;以防止数据丢失。那么&#xff0c;如何将Android手机与电脑同步呢&#xff1f;虽然大多数Android用户可能会使用USB线或蓝牙传输文件到PC&#xff0c;但…

水电表自动抄表系统

1.简述 水电表自动抄表系统是一种现代化智能化管理系统&#xff0c;它利用先进的物联网&#xff0c;完成了远程控制、即时、零接触的水电表读值收集&#xff0c;大大提升了公共事业服务项目的效率和准确性。该系统不仅减少了人工抄表工作量&#xff0c;还避免了人为失误&#…

动画制作软件有哪些?最后一款动画渲染必备

探索动画的无限可能&#xff0c;从简单的线条到复杂的三维世界&#xff0c;动画制作软件是艺术家们实现创意的得力助手。无论是手绘动画的细腻笔触&#xff0c;还是3D建模的立体展现&#xff0c;这些软件都极大地丰富了动画制作的手法和表现形式。接下来&#xff0c;我们将介绍…

应急管理大数据指挥中心解决方案(51页PPT)

方案介绍&#xff1a; 本应急管理大数据指挥中心解决方案充分利用了大数据技术的优势&#xff0c;实现了信息的快速收集、分析和决策支持。通过数据融合、协同指挥、智慧化决策和平台建设等方面的努力&#xff0c;提高了应急管理的效率和准确性&#xff0c;为应对各类突发事件…

珠海鸿瑞毛利率持续下滑:核心产品销量大降,偿债能力偏弱

《港湾商业观察》黄懿 日前&#xff0c;珠海市鸿瑞信息技术股份有限公司&#xff08;下称“珠海鸿瑞”&#xff09;收到了北京证券交易所发出的第三轮审核问询函。 此前&#xff0c;2020年11月&#xff0c;珠海鸿瑞曾向深交所报送上市申请。IPO申请文件获受理后&#xff0c;珠…