react 怎麼實現拷貝功能

react實現拷貝功能的方法：1、通過「copy-to-clipboard」庫實現複製功能；2、使用「react-copy-to-clipboard」庫實現複製功能；3、通過「navigator.clipboard.writeText(e)」方法實現複製；4、通過「document.execcommand(「copy」)」方法實現複製；5、通過「copy-js」庫實現拷貝功能。

本教學操作環境：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 '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 怎麼實現拷貝功能的詳細內容，更多請關注TW511.COM其它相關文章！