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

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.lryc.cn/news/365920.html

相关文章:

  • 推荐系统三十六式学习笔记:原理篇.近邻推荐07|人以群分,你是什么人就看到什么世界
  • 要改进单例模式的实现以确保线程安全并优化性能,有几种常见的方法
  • k8s——Pod容器中的存储方式及PV、PVC
  • Java/Golang:活用interface,增加程序扩展性
  • SQL语句练习每日5题(四)
  • Java排序算法汇总篇,八种排序算法
  • R语言探索与分析20-北京市气温预测分析
  • 2024年安全现状报告
  • OV通配符ssl证书是什么
  • Selenium三种等待方式的使用!
  • websockets怎么工作的呢?
  • 栈 数组和链表实现
  • 如何备份和恢复华为手机?
  • 微波电路S参数测量实验方案
  • SpringTask Cron表达式
  • docker与docker-compose安装
  • 跨境反向海淘系统:业务流程解析与未来发展展望
  • Python语言字母:深度解析与魅力探索
  • 基于JSP技术的社区疫情防控管理信息系统
  • 区间预测 | Matlab实现QRBiTCN分位数回归双向时间卷积神经网络注意力机制时序区间预测
  • Spring MVC中,一个HTTP请求可能会被多个Handler处理
  • Vue3 时间格式化
  • SVN中trunk,branch,tag
  • React ahooks库和React Query库使用场景分析
  • 国产AI大模型哪家强?从投资者角度简单横评5款大模型!
  • uc/OS-III多任务程序
  • 6月13日在线研讨会 | 多产品多流程多团队的ALM选择方案
  • Maven使用${revision}实现多模块版本统一管理及注意事项
  • vue2 bug求助!!!(未解决,大概是浏览器缓存的问题或者是路由的问题)
  • C++的“引用”是条寄生虫