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

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);
}

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

是否可以在不创建虚拟元素的情况下做到这一点？我知道有一些关于剪贴板的react插件，但我只想使用香草javascript。谢谢

Answer 1

您的解决方案运行良好。

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

该execCommand()方法由 HTML5 的Document. 这意味着Document在使用该方法之前必须了解您的目标节点（这称为Selection）。

但是，如果您想从已在 dom 上呈现的元素（例如表单中的输入）复制文本，则可以使用 React 的callback ref。这是一个很好的例子，ref用于执行此操作。这非常简单，因此使用库可能有点过头了。