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

Question

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

我正在关注许多网站和教程。 我是 ReactJS 的新手，我不知道我的代码有什么问题！

这是 function 我

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

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

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

this.setState({copySuccess: true})
}

通过此按钮调用 function。 该按钮工作正常：

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

我觉得问题出在下面function这部分，不知道怎么解决！

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 元素
• 分配您要复制的值并执行复制命令
• 删除您创建的文本区域

Answer 2

您应该使用从中复制的 DOM 元素。 这是一个文本区域的例子。 您不能在字符串值上调用 select。

Answer 3

正如@Rosen 提到的，您应该在 DOM 元素上使用副本

像这样的东西

 <textarea
        ref={(textarea) => this.textArea = textarea}
        value='Some text to copy'
      />

然后在你的 function 中调用它

copyToClipboard = (e) => {
    this.textArea.select();
    document.execCommand('copy');

  };

Answer 4

export const CopyTextIcon: React.FC = () => {
  function copyToClipboard() {
    const tempInput = document.createElement('input')
    tempInput.value = 'text'
    document.body.appendChild(tempInput)
    tempInput.select()
    document.execCommand('copy')
    document.body.removeChild(tempInput)
  }

  return (
    <div onClick={()=>copyToClipboard('topRight')}>
       <img src="/images/ic-SHARE.svg" alt="share" />
    </div>
  )
}