我使用的是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()
}
当前回答
您绝对应该考虑使用上面建议的@Shubham这样的包，但我基于您所描述的创建了一个可用的代码依赖:http://codepen.io/dtschust/pen/WGwdVN?editors=1111。它可以在我的浏览器chrome中工作，也许你可以看到我在那里做了什么你错过了，或者你的应用程序中有一些扩展的复杂性阻止了它的工作。
// html
<html>
<body>
<div id="container">
</div>
</body>
</html>
// js
const Hello = React.createClass({
copyToClipboard: () => {
var textField = document.createElement('textarea')
textField.innerText = 'foo bar baz'
document.body.appendChild(textField)
textField.select()
document.execCommand('copy')
textField.remove()
},
render: function () {
return (
<h1 onClick={this.copyToClipboard}>Click to copy some text</h1>
)
}
})
ReactDOM.render(
<Hello/>,
document.getElementById('container'))
其他回答
您可以使用事件clipboardData收集方法e.clipboardData。setData(类型、内容)。
在我看来，这是实现在剪贴板内推送一些东西的最直接的方法，看看这个(我用它来修改数据，而本地复制动作):
...
handleCopy = (e) => {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!');
}
render = () =>
<Component
onCopy={this.handleCopy}
/>
我选择了这个路径:https://developer.mozilla.org/en-US/docs/Web/Events/copy
干杯!
编辑:出于测试目的，我添加了代码依赖:https://codepen.io/dprzygodzki/pen/ZaJMKb
我采取了和上面一些非常相似的方法，但我认为它更具体一些。在这里，父组件将作为道具传递url(或任何您想要的文本)。
import * as React from 'react'
export const CopyButton = ({ url }: any) => {
const copyToClipboard = () => {
const textField = document.createElement('textarea');
textField.innerText = url;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
};
return (
<button onClick={copyToClipboard}>
Copy
</button>
);
};
const handleCopy = async () => {
let copyText = document.getElementById('input') as HTMLInputElement;
copyText.select();
document.execCommand('copy');
};
return (
<TextField
variant="outlined"
value={copyText}
id="input"
/>
);
这是我的工作。
react钩子的最佳解决方案，不需要外部库
import React, { useState } from 'react'; const MyComponent = () => { const [copySuccess, setCopySuccess] = useState(''); // your function to copy here const copyToClipBoard = async copyMe => { try { await navigator.clipboard.writeText(copyMe); setCopySuccess('Copied!'); } catch (err) { setCopySuccess('Failed to copy!'); } }; return ( <div> <Button onClick={() => copyToClipBoard('some text to copy')}> Click here to copy </Button> // after copying see the message here {copySuccess} </div> ) }
查看关于导航器的进一步文档。弹夹板，导航器。剪贴板文件 navigotor。剪贴板是由大量浏览器支持的，看这里支持的浏览器
最简单的答案就是
navigator.clipboard.writeText(“价值”)
