本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react 怎么实现拷贝功能？
react中实现一键复制——五种办法
copy-to-clipboard库（推荐）react-copy-to-clipboard库（推荐）navigator.clipboard.writetext(e)（推荐）document.execcommand(“copy”)copy-js库copy-to-clipboard1、安装方式
// npm安装---这种方式可能会对babel的版本有限制npm i --save copy-to-clipboard//cdn引入<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>
2、使用方式
import copy from 'copy-to-clipboard';const handleclick = ()=>{ copy('复制的内容'); message.success('复制成功')}<button onclick={handleclick}>复制</button>
react-copy-to-clipboard该方法是基于copy-to-clipboard的，如果在安装copy-to-clipboard的时候，发现和其他部分npm包有版本限制的话，那估计这个也不行，但是也不是不可以试试
1、安装
npm i --save react-copy-to-clipboard
2、用法——这里有个地方要注意，在<copytoclipboard></copytoclipboard>中，只能有一个根元素，并且本人亲试，如果在<copytoclipboard></copytoclipboard>中，一个根元素裹着两个兄弟节点比如div和一个button的话，复制也不会生效，我也不知道为啥，有兴趣的小伙伴可以去看看源码。
import { copytoclipboard } from 'react-copy-to-clipboard'; <copytoclipboard text={'复制的内容'} oncopy={(_, result) => { if (result) { message.success('复制成功'); } else { message.error('复制失败，请稍后再试'); } }} > <button type='primary' icon={<copyoutlined />} /> </copytoclipboard>
document.execcommand(“copy”)——已被弃用不过好似有的浏览器还可以使用，具体看文档点我
这个方法我没有使用过，有什么坑我也不清楚。
使用方法
<button id="btn" style="margin-top: 40px;">一键复制</button>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导入<script src="//cdn.rawgit.com/duyetdev/copy.js/master/dist/copy.min.js"></script>
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这个对象的。还是得看场景使用。
1、使用方法
const { search } = input;const copylink = (e: any) => { navigator.clipboard.writetext(e).then( () => { message.success(intl.t('复制成功')); console.log(e); }, () => { message.error(intl.t('复制失败，请稍后再试')); }, );}; <search bordered={false} value={window.location.href} enterbutton={intl.t('复制链接')} size='middle' onsearch={copylink} />
可能还有其他一些方法，暂时没有想到的
推荐学习：《react视频教程》
以上就是react 怎么实现拷贝功能的详细内容。