首页 > web前端 > 前端问答 > react 怎么实现拷贝功能

react 怎么实现拷贝功能

藏色散人
发布: 2022-12-30 11:27:47
原创
3031 人浏览过

react实现拷贝功能的方法:1、通过“copy-to-clipboard”库实现复制功能;2、使用“react-copy-to-clipboard”库实现复制功能;3、通过“navigator.clipboard.writeText(e)”方法实现复制;4、通过“document.execcommand(“copy”)”方法实现复制;5、通过“copy-js”库实现拷贝功能。

react 怎么实现拷贝功能

本教程操作环境: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-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 &#39;copy-to-clipboard&#39;;const handleClick = ()=>{
	copy(&#39;复制的内容&#39;);
	message.success(&#39;复制成功&#39;)}<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 &#39;react-copy-to-clipboard&#39;;

 <CopyToClipboard text={&#39;复制的内容&#39;}
   onCopy={(_, result) => {
     if (result) {
       message.success(&#39;复制成功&#39;);
     } else {
       message.error(&#39;复制失败,请稍后再试&#39;);
     }
   }}
 >
   <Button
     type=&#39;primary&#39;
     icon={<CopyOutlined />}
   />
 </CopyToClipboard>
登录后复制

document.execcommand(“copy”)——已被弃用

不过好似有的浏览器还可以使用,具体看文档点我
这个方法我没有使用过,有什么坑我也不清楚。

使用方法

<button id="btn"  style="margin-top: 40px;">一键复制</button>const btn = document.querySelector(&#39;#btn&#39;);
  btn.addEventListener(&#39;click&#39;, () => {
      const textarea= document.createElement(&#39;textarea&#39;);
      textarea.setAttribute(&#39;readonly&#39;, &#39;readonly&#39;);
      textarea.value = &#39;xxxxx&#39;;
      document.body.appendChild(textarea);
      textarea.select();
      if (document.execCommand(&#39;copy&#39;)) {
          document.execCommand(&#39;copy&#39;);
          alert(&#39;复制成功&#39;);
      }
      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 &#39;copy-to-clipboard&#39;;copy(&#39;hello world&#39;, function(err) {
    if (err) console.log(&#39;Some thing went wrong!&#39;);
 
    console.log(&#39;Copied!&#39;);});
登录后复制

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(&#39;复制成功&#39;));
      console.log(e);
    },
    () => {
      message.error(intl.t(&#39;复制失败,请稍后再试&#39;));
    },
  );};


 <Search
   bordered={false}
   value={window.location.href}
   enterButton={intl.t(&#39;复制链接&#39;)}
   size=&#39;middle&#39;
   onSearch={copyLink}
 />
登录后复制

可能还有其他一些方法,暂时没有想到的

推荐学习:《react视频教程

以上是react 怎么实现拷贝功能的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板