React antd Select 无法在disabled状态下选择并复制输入框内的内容情况分析及解决方案

背景

在React项目开发中,我们经常会用到antd内的Select组件。有时候我们会在disabled状态使用Select。这个时候我们偶尔会想要复制到Select内的这个输入框里面的内容。但是会发现无法复制。
我这边使用的是antd4

请添加图片描述在这里插入图片描述

问题分析

出现了无法复制的情况,那么我们就要进行问题的分析
首先,通过打开控制台的方式,来看这个Select的Dom是怎么样的

在这里插入图片描述

我们通过控制台可以看到,antd的Select实现并非传统的使用原生select来改动,而是自己通过div和span通过代码组合来组装成的组件。

解决思路一:会不会是由于在选择框内hover的时候出现的那个图标导致的

于是,就直接在element内改动样式,去掉这个玩意
众所周知,一般这种图标,鼠标置于某处,鼠标的样式是由cursor这个东西决定的

在这里插入图片描述

去掉之后,果然还是不行

解决思路二:会不会是这个span禁止复制

从我们所学到的知识来看,禁止一个span被复制,我们可以使用css来处理,也就是在 这个span上加上一段css

<span style={{ userSelect: 'none'}}>不可以被复制的文字</span>

这一段代码加上,就会让span无法被复制

在这里插入图片描述

一看,果然有。但是去掉之后,还是不行

但是去掉之后还是不行,心碎思密达

解决思路三:去看看antd具体实现

遇事不决,去看源码
在这里插入图片描述
一顿框框的看之后,意识到了问题的所在,我们想要复制的是span的内容,但是在他的上层有一层div,我们关于的鼠标事件就被div遮盖了。所以,我们需要将鼠标事件,穿透到span上触发。

最终解决方案

在这里插入图片描述

pointer-events:none 的作用:
阻止用户的点击动作产生任何效果
阻止缺省鼠标指针的显示
阻止CSS里的 hover 和 active 状态的变化触发事件
阻止JavaScript点击动作触发的事件

mdn的解释的再解释:(中翻中了属于是)
pointer-events:none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto(默认值),鼠标还是会监听这个子元素的。

更通俗的说法是,pointer-events:none作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素,则我们在页面上看到的这个按钮,只是一个虚幻的影子而已,您可以理解为海市蜃楼,幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!

在这里插入图片描述
只需要在Select使用处,加上样式 pointer-events:none。然后重写这个antd的样式即可解决这个问题。

其他版本的解决方案

antd3.*

这个版本直接用div套div的方式
在这里插入图片描述
还是同理,修改这两处即可。

antd5.*

在这里插入图片描述

  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值