站長(zhǎng)資訊網(wǎng)
react實(shí)現(xiàn)拷貝功能的方法：1、通過(guò)“copy-to-clipboard”庫(kù)實(shí)現(xiàn)復(fù)制功能；2、使用“react-copy-to-clipboard”庫(kù)實(shí)現(xiàn)復(fù)制功能；3、通過(guò)“navigator.clipboard.writeText(e)”方法實(shí)現(xiàn)復(fù)制；4、通過(guò)“document.execcommand(“copy”)”方法實(shí)現(xiàn)復(fù)制；5、通過(guò)“copy-js”庫(kù)實(shí)現(xiàn)拷貝功能。
本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。
React中實(shí)現(xiàn)一鍵復(fù)制——五種辦法
- copy-to-clipboard庫(kù)（推薦）
- react-copy-to-clipboard庫(kù)（推薦）
- navigator.clipboard.writeText(e)（推薦）
- document.execcommand(“copy”)
- copy-js庫(kù)
copy-to-clipboard
1、安裝方式
// npm安裝---這種方式可能會(huì)對(duì)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('復(fù)制的內(nèi)容'); message.success('復(fù)制成功')}<Button onClick={handleClick}>復(fù)制</Button>
react-copy-to-clipboard
該方法是基于copy-to-clipboard的，如果在安裝copy-to-clipboard的時(shí)候，發(fā)現(xiàn)和其他部分npm包有版本限制的話，那估計(jì)這個(gè)也不行，但是也不是不可以試試
1、安裝
npm i --save react-copy-to-clipboard
2、用法——這里有個(gè)地方要注意，在<CopyToClipboard></CopyToClipboard>中，只能有一個(gè)根元素，并且本人親試，如果在<CopyToClipboard></CopyToClipboard>中，一個(gè)根元素裹著兩個(gè)兄弟節(jié)點(diǎn)比如div和一個(gè)button的話，復(fù)制也不會(huì)生效，我也不知道為啥，有興趣的小伙伴可以去看看源碼。
import { CopyToClipboard } from 'react-copy-to-clipboard'; <CopyToClipboard text={'復(fù)制的內(nèi)容'} onCopy={(_, result) => { if (result) { message.success('復(fù)制成功'); } else { message.error('復(fù)制失敗，請(qǐng)稍后再試'); } }} > <Button type='primary' icon={<CopyOutlined />} /> </CopyToClipboard>
document.execcommand(“copy”)——已被棄用
不過(guò)好似有的瀏覽器還可以使用，具體看文檔點(diǎn)我
這個(gè)方法我沒(méi)有使用過(guò)，有什么坑我也不清楚。
使用方法
<button id="btn" style="margin-top: 40px;">一鍵復(fù)制</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('復(fù)制成功'); } document.body.removeChild(textarea); })
copy-js庫(kù)
這塊我只是找到了這個(gè)庫(kù)，也沒(méi)有使用過(guò)，但是我看源碼底層也是使用的document.execcommand("copy")
1、安裝
// npm包下載npm install copy-js --save// CDN導(dǎo)入<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)
這個(gè)方法也有踩坑的地方，開發(fā)時(shí)間比較短，也沒(méi)有具體去研究原因
這個(gè)方法的參數(shù)e，是需要拿到input文本框的value值為復(fù)制的節(jié)點(diǎn)
但是這個(gè)方法可能在一些應(yīng)用里邊的端內(nèi)瀏覽器會(huì)有限制，在正常瀏覽器里是可以使用的，但是比如說(shuō)現(xiàn)在在飛書端內(nèi)瀏覽器里邊是沒(méi)有clipboard這個(gè)對(duì)象的。還是得看場(chǎng)景使用。
1、使用方法
const { Search } = Input;const copyLink = (e: any) => { navigator.clipboard.writeText(e).then( () => { message.success(intl.t('復(fù)制成功')); console.log(e); }, () => { message.error(intl.t('復(fù)制失敗，請(qǐng)稍后再試')); }, );}; <Search bordered={false} value={window.location.href} enterButton={intl.t('復(fù)制鏈接')} size='middle' onSearch={copyLink} />
可能還有其他一些方法，暫時(shí)沒(méi)有想到的
推薦學(xué)習(xí)：《react視頻教程》
