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

1. 在 React 中使用 e.clipboardData.setData() 方法複製到剪貼簿
2. 在 React 中使用 navigator.clipboard.writeText() 複製到剪貼簿
3. 使用 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> 元件，它將作為觸發器將文字值複製到剪貼簿。