clipboard - react : copy component state value to clipboard without dummy element

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 插件，但我只想使用 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 .这很简单，所以使用 library很可能是矫枉过正。