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中實作一鍵複製-五種辦法
#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('复制成功')}0ac49d3b14c40e8d204137d7fbf76f9d复制a1cb88e6789f399807801ea3799938af
該方法是基於copy-to-clipboard的,如果在安裝copy-to-clipboard的時候,發現和其他部分npm套件有版本限制的話,那估計這個也不行,但是也不是不可以試試
1、安裝
npm i --save react-copy-to-clipboard
2、用法-這裡有個地方要注意,在 d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127
中,只能有一個根元素,並且本人親試,如果在d2e6d4ef1056974ae0f1f1d2d4feed0954eaac8efc3be0e4829f8d3d1d1d0127
中,一個根元素包裹著一個根元素包裹著兩個兄弟節點例如div和一個button的話,複製也不會生效,我也不知道為啥,有興趣的小夥伴可以去看看源碼。
import { CopyToClipboard } from 'react-copy-to-clipboard'; 43bbcd4e844b20bc078f8c9897b39d8a { if (result) { message.success('复制成功'); } else { message.error('复制失败,请稍后再试'); } }} > a8a83f830be7ccf2b2ad5e838aba8303} /> 54eaac8efc3be0e4829f8d3d1d1d0127
不過好似有的瀏覽器還可以使用,具體看文檔點我
這個方法我沒有使用過,有什麼坑我也不清楚。
使用方法
42b48c43c2d811927b81b54d0c1f3424一键复制65281c5ac262bf6d81768915a4a77ac0const 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); })
這塊我只是找到了這個庫,也沒有使用過,但是我看源碼底層也是使用的document.execcommand("copy")
1、安裝
// npm包下载npm install copy-js --save// CDN导入adf581fd640ebe59dee87c508e6d19bb2cacc6d41bbb37262a98f745aa00fbf0
2、使用
import copy from 'copy-to-clipboard';copy('hello world', function(err) { if (err) console.log('Some thing went wrong!'); console.log('Copied!');});
這個方法也有踩坑的地方,開發時間比較短,也沒有具體去研究原因
這個方法的參數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('复制失败,请稍后再试')); }, );}; 462d3c01430fac045c2ece97525bf109
可能還有其他一些方法,暫時沒有想到的
推薦學習:《react影片教學》
以上是react 怎麼實現拷貝功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!