反应：将组件状态值复制到没有虚拟元素的剪贴板

Question

在我的项目中有一个使用案例：用户单击一个按钮，然后将一些数据复制到剪贴板以供下一步使用。

复制的数据与点击的按钮相关，存储在组件状态中。

我做了一些搜索，找到了如下可能的解决方案：

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

在某种程度上，我们需要创建一个虚拟元素，将复制的数据设置到虚拟元素和 select 元素，然后执行 execCommand(copy) 方法。

是否可以在不创建虚拟元素的情况下执行此操作？我知道有一些关于剪贴板的 React 插件，但我只想使用 vanilla javascript。谢谢

Answer 1

您的解决方案效果很好。

如果您要复制的值尚未在 DOM 上呈现，您的 Document.createElement('input')... 方法是创建 Document 知道的文档节点的好方法，但是对用户来说是不可见的。使用 .createElement() 后，您可以对其调用 execCommand() 以将值复制到剪贴板。

execCommand() 方法由 HTML5 的 Document 公开。这意味着 Document 必须先了解您要定位的节点，然后才能使用该方法（这称为 Selection）。

但是，如果您想从 dom 上已经呈现的元素复制文本（例如表单中的输入），您可以使用 React 的 callback ref. Here's a good example of using ref to do this. It's pretty simple, so using a library 可能有点矫枉过正。

反应：将组件状态值复制到没有虚拟元素的剪贴板

react: copy component state value to clipboard without dummy element

clipboard