首頁 > web前端 > 前端問答 > react 怎麼實現拷貝功能

react 怎麼實現拷貝功能

藏色散人
發布: 2022-12-30 11:27:47
原創
3032 人瀏覽過

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板