在 React 中使用 document.execCommand 将文本从 div 复制到剪贴板

Question

我正在尝试在 URL 被缩短后从 div 复制文本。

我在 div 中放置了一个 ref 值，它将呈现缩短的 URL。但是，我收到错误：

TypeError: inputArea.input.select() is not a function.

我不确定如何引用 div 中的文本。

import { useCallback, useEffect, useRef, useState } from "react";

const Shorten = () => {
        
    const [copySuccess, setCopySuccess] = useState('');
    const inputArea = useRef(null);
        
    function copyLink(e){
        inputArea.current.select();
        document.execCommand('copy');
        e.target.focus();
        setCopySuccess('Copied!');
    };
 
    {isPending && <div className="loading-text">Loading...</div>}
    {shortLink && <div ref={inputArea} className="shorten-text">{shortLink}</div>}
    <hr></hr>
    <div>
      <button className="shorten-it" onClick={copyLink} >Copy</button>
      {copySuccess}
    </div>
  </section>

Answer 1

Document.execCommand will get deprecated in favor of the modern Clipboard API to interact with clipboard.

这里是如何使用剪贴板 API:

function updateClipboard(newClip) {
  navigator.clipboard.writeText(newClip).then(
    () => {
      setCopySuccess("Copied!");
    },
    () => {
      setCopySuccess("Copy failed!");
    }
  );
}

function copyLink() {
  navigator.permissions
    .query({ name: "clipboard-write" })
    .then((result) => {
      if (result.state === "granted" || result.state === "prompt") {
        updateClipboard(inputArea.current?.innerText);
      }
    });
}

使用注意事项Clipboard API：

The Clipboard API adds greater flexibility, in that you aren't limited to copying the current selection into the clipboard, but can directly specify what information to place into the clipboard.

Using the API requires that you have the permission "clipboardRead" or "clipboardWrite" in your manifest.json file.

The clipboard-write permission is granted automatically to pages when they are in the active tab. The clipboard-read permission must be requested, which you can do by trying to read data from the clipboard.

Clipboard API (clipboard-write permission) is currently not supported by Firefox but supported by Chrome / Chromium

或者，要使用 Document.execCommand，您应该将 div 转换为 input 或 textarea（可以选择）并使用 CSS让它看起来像 div:

function copyLink(e) {
  inputArea.current?.select();
  document.execCommand("copy");
  e.target.focus();
  setCopySuccess("Copied!");
}

// ...

{shortLink && (
  <input
    ref={inputArea}
    type="text"
    className="shorten-text"
    value={shortLink}
  />
)}

或者，如果您仍想使用 div，请参阅。

在 React 中使用 document.execCommand 将文本从 div 复制到剪贴板

Copy text from a div to clipboard using document.execCommand in React

javascript

reactjs

use-ref