如何使用反应钩子将 HTML 复制到剪贴板？

Question

我现在有一个部分有一个表格，我希望用户能够将表格的 HTML 代码复制到剪贴板。

这是我在代码沙箱上的解决方案：live demo

下面的js代码

import React, { useState, useRef } from "react";

export default function App() {
  const tableRef = useRef(null);
  const [copySuccess, setCopySuccess] = useState("");

  const copyToClipboard = (e) => {
    const code =tableRef.current.innerHTML;
    console.log('code', code);
    document.execCommand("copy");
    e.target.focus();
    setCopySuccess("Copied!");
  };

  return (
    <div className="App">
      <div ref={tableRef} className="table">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
            </tr>
          </tbody>
        </table>
      </div>

      {document.queryCommandSupported("copy") && (
        <div>
          <button onClick={copyToClipboard}>Copy</button>
          {copySuccess}
        </div>
      )}
    </div>
  );
}

很遗憾，这不是复制 HTML 代码。

我需要更改哪些内容才能将 HTML 复制到剪贴板？

这里有什么问题？

Answer 1

问题在于它将选定/突出显示的文本复制到剪贴板，因此您只需在运行 execCommand 之前以编程方式执行此操作。

1. 添加隐藏输入（设置不可见并定位绝对/离屏）
2. 在复制功能中，将该输入的值设置为 html
3. 使用选择事件选择隐藏的输入
4. execCommand(‘复制’);

编辑

它可能适用于隐藏或设置显示的输入类型：无；但我依稀记得几年前我这样做时会阻止选择事件。