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

JavaScript

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()
}

第834篇《在reactJS中，如何将文本复制到剪贴板？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
BB 2020.03.11 
<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>
卡卡西Stafan 2020.03.11

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

定义方法

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

调用那个方法

<button copyToClipboard={shareLink}>
   Click to copy current url to clipboard
</button>
老丝村村Stafan 2020.03.11

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android