反应：将组件状态值复制到剪贴板，而不使用伪元素

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

在某种程度上，我们需要创建一个伪元素，将复制的数据设置为伪元素并选择该元素，然后执行执行命令（复制）方法。

是否有可能做到这一点，而不创建虚拟元素？我知道有一些反应插件关于剪贴板，但我只想使用香草javascript.谢谢

Answer 1

你的解决方案很有效。

如果要复制的值尚未在DOM上呈现，那么您的Document.create元素（'输入'）...方法是创建一个文档节点的好方法，该节点文档知道，但对用户来说是不可见的。一旦您使用. createElement（），您就可以调用执行命令（）将值复制到剪贴板。

方法是由HTML5的文档公开的。这意味着文档在使用该方法之前必须了解您所针对的节点（这称为选择）。

但是，如果您想从dom上已经呈现的元素中复制文本（例如表单中的输入），您可以使用React的回调ref。这里有一个使用ref来做到这一点的好例子。它非常简单，所以使用库可能会过度使用。