在 React 中實現複製到剪貼簿功能
-
在 React 中使用
e.clipboardData.setData()
方法複製到剪貼簿 -
在 React 中使用
navigator.clipboard.writeText()
複製到剪貼簿 -
使用
react-copy-to-clipboard
包複製到剪貼簿
複製和貼上是在各種裝置和作業系統中使用的普遍流行的功能。
在開發應用程式時,有時你可以預測需要複製特定值,例如一段文字。在這些情況下,你可以實現一個自動複製它的按鈕。這很有用,因為使用手機的人有時可能難以選擇文字。
ReactJS 經過優化,可以開發使用者友好的應用程式。該框架可以輕鬆實現複製一段文字的可點選按鈕(或連結)。
在 React 中使用 e.clipboardData.setData()
方法複製到剪貼簿
此方法提供了一種簡單的方法來偵聽事件並在事件發生後複製文字。你的處理程式需要接收對瀏覽器事件的引用。
在 React 中,這將是 SyntheticEvent
的一個例項,簡稱為 e
。讓我們看一個簡單的例子:
class App extends Component {
constructor(props){
super(props)
this.state = {
text: "This is a sample text"
}
}
render() {
const handleCopy = (e) => {
e.preventDefault()
e.clipboardData.setData("Text", this.state.text)
}
return (
<div>
<p>{this.state.text}</p>
<button onClick={(e) => handleCopy(e)}>Copy Text</button>
</div>)
}
}
在這個例子中,我們在 text
state 屬性中儲存了一個文字值。然後,一旦按鈕被點選,我們就會執行處理程式,它使用 e.clipboardData.setData()
方法將文字推送到剪貼簿。
該方法有兩個引數:複製值的型別和值本身。
據 caniuse.com 稱,全球 95% 的網際網路瀏覽者都使用支援此功能的瀏覽器。所以使用起來是安全的。
在 React 中使用 navigator.clipboard.writeText()
複製到剪貼簿
Navigator
介面是一個更現代的 API。它為世界各地的使用者提供幾乎相同的支援 (92%)。它與功能和類元件相容。
讓我們看一個例子:
class App extends Component {
constructor(props){
super(props)
this.state = {
text: "This is a sample text"
}
}
render() {
return (
<div>
<p>{this.state.text}</p>
<button onClick={() => navigator.clipboard.writeText(this.state.text)}>Copy Text</button>
</div>)
}
}
如你所見,這是一個更簡單的解決方案,需要更少的程式碼行。它不需要你匯入任何值或安裝外部包。
僅出於這個原因,對我來說,Navigator
介面是將文字複製到剪貼簿的更好方法。你可以在 playcode 上自己嘗試一下。
在使用 Navigator
介面之前,你應該記住舊版本的 Internet Explorer 不支援它。此外,在 Chrome 中,似乎 Navigator
介面只在頁面被標記為安全(HTTPS 或 localhost)時才有效。
除了這兩點之外,使用這種方法沒有任何缺點。
使用 react-copy-to-clipboard
包複製到剪貼簿
如果你不反對安裝外部軟體包,react-copy-to-clipboard
可能是你最好的解決方案。要獲得有關不同功能的深入資訊,請檢視其官方 npm 頁面。
安裝後,你將可以訪問自定義 <CopyToClipboard>
元件。你可以使用其 text
屬性來提供需要複製的值。然後你可以新增一個簡單的 <button>
元件,它將作為觸發器將文字值複製到剪貼簿。
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn