本教程操作環境：Windows10系統、react18.0.0版、Dell G3電腦。
react 怎么實現拷貝功能？
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("復制成功")}<Button onClick={handleClick}>復制</Button>該方法是基于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>不過好似有的瀏覽器還可以使用，具體看文檔點我 這個方法我沒有使用過，有什么坑我也不清楚。
使用方法
<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); })這塊我只是找到了這個庫，也沒有使用過，但是我看源碼底層也是使用的document.execcommand("copy")1、安裝
// npm包下載npm install copy-js --save// CDN導入<script src="http://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!");});這個方法也有踩坑的地方，開發時間比較短，也沒有具體去研究原因 這個方法的參數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視頻教程》
以上就是react 怎么實現拷貝功能的詳細內容，更多請關注php中文網其它相關文章！
關鍵詞： React
營業執照公示信息