[JavaScript知识库]react实现点击复制

1、使用浏览器提供的document.execCommand('copy')

2、使用copy-to-clipboard库

document.execCommand("copy")

1、document.execCommand封装

function copy(e) {
    let transfer = document.createElement('input');
    document.body.appendChild(transfer);
    transfer.value = target.value;  // 这里表示想要复制的内容
    transfer.focus();
    transfer.select();
    if (document.execCommand('copy')) { //判断是否支持document.execCommand('copy')       document.execCommand('copy');
    }
    transfer.blur();
    console.log('复制成功');
    document.body.removeChild(transfer);
    
}
?
$('#copyBtn').addEventListener('click', copy);

其实就是新创建了一个inputDOM元素，然后选中该元素，把要复制的内容赋给input.value，这个时候执行document.execCommand('copy')，会把当前页面所有选中的内容复制到剪贴板，也就实现了复制的操作，最后再把新建的DOM元素移除，在不影响DOM树的情况下达到复制的目的。

拓展

document.execCommand()?方法其实用法还有很多，它可以使当前选中的可编辑内容实现一些常用的操作，如copy、cut、paste、delete、contentReadOnly等等，具体请看document.execCommand，但使用这个API需要谨慎，因为这相当于篡改网页原生的交互，可能会和用户的交互操作产生冲突，发生意想不到的结果。但是在某些特定的场景，使用这个API能达到不错的效果，比如富文本编辑器里就是个神器，值得慢慢去研究。

2、使用copy-to-clipboard库

npm下载

npm i --save copy-to-clipboard

yarn下载

yarn add copy-to-clipboard

引入

import copy from 'copy-to-clipboard';

直接使用

 function CopyUrl() {
   copy(内容)
}