如何使用 ReactJS 将文本复制到剪贴板？

Question

我正在构建一个将文本转换为数组的 React Web 应用程序。我希望用户单击最终输出并能够将其复制到剪贴板上。

我正在关注许多网站和教程。我对 ReactJS 很陌生，我不知道我的代码有什么问题！

这是我的功能

copyToClipboard() {
const {array} = this.state

const textToCopy = "const myArray =" + JSON.stringify(array)

textToCopy.select()
document.execCommand("copy")

this.setState({copySuccess: true})
}

该函数由该按钮调用。该按钮工作正常：

      <button onClick={this.copyToClipboard.bind(this)} id="copy-to-clipboard" className="btn btn-normal">Copy to clipboard</button>

我认为问题出在下面函数的这一部分，但我不知道如何解决！

textToCopy.select()
document.execCommand("copy")

链接到整个应用程序 + 代码：

https://codepen.io/Nerdifico/pen/MWKPdNX?editors=0010

Answer 1

const copyToClipboard = (content: any) => {
  const el = document.createElement('textarea');
  el.value = content;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

这是我的解决方案，它包含 3 个步骤：

• 创建一个空的 textarea 元素
• 分配您要复制的值并执行复制命令
• 删除你创建的textarea