使用 ReactJS 將文本復制到剪貼板

Question

我已經在這個問題上停留了一段時間了，找不到任何可以幫助我的東西，所以如果有經驗的人可以幫助我解決這個問題，我會很高興。

可以說我有這個常量：

const test = "Hello World".

我怎樣才能在按鈕上有一個 onClick function，當我點擊它將測試字符串復制到用戶剪貼板時？

Answer 1

您可以在反應頁面上添加按鈕：

<button onClick={() =>  navigator.clipboard.writeText('Copy this text to clipboard')}>Copy</button>

Answer 2

要復制剪貼板上的文本，您可以在舊版瀏覽器中使用navigator.clipboard和document.execCommand() 。

onClick={async () => {
  if ("clipboard" in navigator) {
    await navigator.clipboard.writeText("Text which you want to copy");
  } else {
    document.execCommand("copy", true, "Text which you want to copy");
  }
}}