建站
咨询
售后
建站咨询
这篇文章主要介绍“react如何实现拷贝功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现拷贝功能”文章能帮助大家解决问题。
目前成都创新互联已为上千家的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、桐乡网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
react实现拷贝功能的方法：1、通过“copy-to-clipboard”库实现复制功能；2、使用“react-copy-to-clipboard”库实现复制功能；3、通过“navigator.clipboard.writeText(e)”方法实现复制；4、通过“document.execcommand(“copy”)”方法实现复制；5、通过“copy-js”库实现拷贝功能。
React中实现一键复制——五种办法
copy-to-clipboard库（推荐）
react-copy-to-clipboard库（推荐）
navigator.clipboard.writeText(e)（推荐）
document.execcommand(“copy”)
copy-js库
copy-to-clipboard
1、安装方式
// npm安装---这种方式可能会对babel的版本有限制
npm i --save copy-to-clipboard
//cdn引入
2、使用方式
import copy from 'copy-to-clipboard';const handleClick = ()=>{
copy('复制的内容');
message.success('复制成功')}
react-copy-to-clipboard
该方法是基于copy-to-clipboard的，如果在安装copy-to-clipboard的时候，发现和其他部分npm包有版本限制的话，那估计这个也不行，但是也不是不可以试试
1、安装
npm i --save react-copy-to-clipboard
2、用法——这里有个地方要注意，在
import { CopyToClipboard } from 'react-copy-to-clipboard';
onCopy={(_, result) => {
if (result) {
message.success('复制成功');
} else {
message.error('复制失败，请稍后再试');
}
}}
>
icon={
/>
document.execcommand(“copy”)——已被弃用
不过好似有的浏览器还可以使用，具体看文档点我
这个方法我没有使用过，有什么坑我也不清楚。
使用方法
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
const textarea= document.createElement('textarea');
textarea.setAttribute('readonly', 'readonly');
textarea.value = 'xxxxx';
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}
document.body.removeChild(textarea);
})
copy-js库
这块我只是找到了这个库，也没有使用过，但是我看源码底层也是使用的document.execcommand("copy")
1、安装
// npm包下载npm install copy-js --save// CDN导入
2、使用
import copy from 'copy-to-clipboard';copy('hello world', function(err) {
if (err) console.log('Some thing went wrong!');
console.log('Copied!');});
navigator.clipboard.writeText(e)
这个方法也有踩坑的地方，开发时间比较短，也没有具体去研究原因
这个方法的参数e，是需要拿到input文本框的value值为复制的节点
但是这个方法可能在一些应用里边的端内浏览器会有限制，在正常浏览器里是可以使用的，但是比如说现在在飞书端内浏览器里边是没有clipboard这个对象的。还是得看场景使用。
使用方法
const { Search } = Input;const copyLink = (e: any) => {
navigator.clipboard.writeText(e).then(
() => {
message.success(intl.t('复制成功'));
console.log(e);
},
() => {
message.error(intl.t('复制失败，请稍后再试'));
},
);};
value={window.location.href}
enterButton={intl.t('复制链接')}
size='middle'
onSearch={copyLink}
/>关于“react如何实现拷贝功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
网站栏目：react如何实现拷贝功能
网站链接：http://lswzjz.com/article/jhdojh.html
