本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。
react 怎么实现拷贝功能？
React中实现一键复制——五种办法
(资料图片)
copy-to-clipboard
1、安装方式
// 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("复制成功")}登录后复制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"; { if (result) { message.success("复制成功"); } else { message.error("复制失败，请稍后再试"); } }} > } /> 登录后复制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导入<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值为复制的节点
1、使用方法
const { Search } = Input;const copyLink = (e: any) => { navigator.clipboard.writeText(e).then( () => { message.success(intl.t("复制成功")); console.log(e); }, () => { message.error(intl.t("复制失败，请稍后再试")); }, );}; 登录后复制可能还有其他一些方法，暂时没有想到的
推荐学习：《react视频教程》
以上就是react 怎么实现拷贝功能的详细内容，更多请关注php中文网其它相关文章！
