通过创建隐藏输入在 React 中复制文本答案

【问题标题】：Copying a text in React via creating a hidden input通过创建隐藏输入在 React 中复制文本
【发布时间】：2020-03-07 04:12:18
【问题描述】：

在我的react 项目中，我尝试将文本复制到clipboard。在函数中，我尝试创建一个隐藏输入，选择它并在文档对象中选择exec“复制”，如下所示：

const copyToClipboard = (textToCopy) => {
   console.log('textToCopy', textToCopy); // Outputs
   let input = document.createElement("input");
       input.setAttribute("type", "hidden");
       input.setAttribute("name", "temp_copy_input")
       input.setAttribute("value", textToCopy);
       input.select()
       console.log('input', input) // outputs object successfully
       document.execCommand("copy");
           input.remove();
}

所有console.log 工作正常，但似乎没有复制输入值。

我错过了什么？

注意：我认为它不是重复的。我在这里遗漏了一些细节，将输入附加到文档中。

【问题讨论】：

您可以尝试在您的document.execCommand("copy") 上执行try catch 块，以查看在尝试复制文本时是否出现任何错误。 document.execComand 还返回一个 boolean 值，指示您的操作是否成功。
非常有趣，但它返回 true。
In reactJS, how to copy text to clipboard?的可能重复

标签： javascript reactjs

【解决方案1】：

这对你有用

var input = document.createElement("input");
    document.body.appendChild(input);
    input.value = textToCopy
    input.select();
    document.execCommand("copy");
    document.body.removeChild(input);

或

var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = textToCopy
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);

【讨论】：