在reactJS中，如何将文本复制到剪贴板？

Tony西门2020-03-11

我正在使用ReactJS，当用户单击链接时，我要将一些文本复制到剪贴板。

我正在使用Chrome 52，并且不需要支持任何其他浏览器。

我看不到为什么这段代码不会导致数据被复制到剪贴板。（代码段的来源来自Reddit帖子）。

我做错了吗？谁能建议有一种“正确”的方法来使用reactjs实现复制到剪贴板吗？

copyToClipboard = (text) => {
  console.log('text', text)
  var textField = document.createElement('textarea')
  textField.innerText = text
  document.body.appendChild(textField)
  textField.select()
  document.execCommand('copy')
  textField.remove()
}

BB2020/03/11 23:18:40

<input
value={get(data, "api_key")}
styleName="input-wrap"
title={get(data, "api_key")}
ref={apikeyObjRef}
/>
  <div
onClick={() => {
  apikeyObjRef.current.select();
  if (document.execCommand("copy")) {
    document.execCommand("copy");
  }
}}
styleName="copy"
>
  复制
</div>

卡卡西Stafan2020/03/11 23:18:40

如果您要将当前网址复制到剪贴板，这是另一个用例：

定义方法

const copyToClipboard = e => {
  navigator.clipboard.writeText(window.location.toString())
}

调用那个方法

<button copyToClipboard={shareLink}>
   Click to copy current url to clipboard
</button>

老丝村村Stafan2020/03/11 23:18:39

如果要以编程方式将数据写入剪贴板，请在按钮上使用此简单的内联onClick函数。

onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer