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

Chris Bao

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

复制的数据与单击的按钮有关，并以组件状态存储。

我进行了一些搜索，找到了可能的解决方案，如下所示：

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。谢谢

乔丹·罗尔夫

您的解决方案效果很好。

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

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

但是，如果您想从dom中已经呈现的元素（例如，表单中的输入）中复制文本，则可以使用React的callback ref。下面是使用的一个很好的例子ref来做到这一点。这很简单，因此使用库可能会显得过大。