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

我正在尝试从divURL被缩短后。

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

类型错误：inputArea.input.select() 不是函数。

我不知道如何引用 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>

Document.execCommand https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand将会得到已弃用有利于现代剪贴板API https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API与互动剪贴板 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_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);
      }
    });
}

使用注意事项剪贴板API https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard#using_the_clipboard_api:

剪贴板 API 添加了更多功能灵活性，在那个你不受限制将当前选择复制到剪贴板，但可以直接指定将哪些信息放入剪贴板。

使用 API 需要您拥有允许manifest.json 文件中的“clipboardRead”或“clipboardWrite”。

授予剪贴板写入权限自动地当页面位于活动选项卡时。必须请求剪贴板读取权限，您可以通过尝试从剪贴板读取数据来做到这一点。

Clipboard API（剪贴板写入权限）目前 Firefox 不支持，但 Chrome / Chromium 支持 https://bugzilla.mozilla.org/show_bug.cgi?id=1560373

或者，使用Document.execCommand，你应该转换div进入一个input or 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}
  />
)}

Or, see 如何将文本从 div 复制到剪贴板 https://stackoverflow.com/q/36639681/2873538如果你还想使用div.