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.*

在这里插入图片描述