在 React 中實現複製到剪貼簿功能

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中使用 e.clipboardData.setData() 方法複製到剪貼簿
  2. 在 React 中使用 navigator.clipboard.writeText() 複製到剪貼簿
  3. 使用 react-copy-to-clipboard 包複製到剪貼簿
在 React 中實現複製到剪貼簿功能

複製和貼上是在各種裝置和作業系統中使用的普遍流行的功能。

在開發應用程式時,有時你可以預測需要複製特定值,例如一段文字。在這些情況下,你可以實現一個自動複製它的按鈕。這很有用,因為使用手機的人有時可能難以選擇文字。

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 Tchigladze avatar Irakli Tchigladze avatar

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