文章目录

背景问题分析解决思路一：会不会是由于在选择框内hover的时候出现的那个图标导致的解决思路二：会不会是这个span禁止复制解决思路三：去看看antd具体实现

最终解决方案其他版本的解决方案antd3.*antd5.*

背景

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

问题分析

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

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

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

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

去掉之后，果然还是不行

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

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

不可以被复制的文字

这一段代码加上，就会让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.*

文章链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了： 


大家都在找：

react.js：react.js和react区别

前端：前端开发工程师

前端框架：前端框架有哪些