我使用的是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()
}
当前回答
对于那些试图从DIV而不是文本字段中进行选择的人，下面是代码。代码是不言自明的，但如果你想了解更多信息，请在这里评论:
import React from 'react';
....
//set ref to your div
setRef = (ref) => {
// debugger; //eslint-disable-line
this.dialogRef = ref;
};
createMarkeup = content => ({
__html: content,
});
//following function select and copy data to the clipboard from the selected Div.
//Please note that it is only tested in chrome but compatibility for other browsers can be easily done
copyDataToClipboard = () => {
try {
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(this.dialogRef);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
this.showNotification('Macro copied successfully.', 'info');
this.props.closeMacroWindow();
} catch (err) {
// console.log(err); //eslint-disable-line
//alert('Macro copy failed.');
}
};
render() {
return (
<div
id="macroDiv"
ref={(el) => {
this.dialogRef = el;
}}
// className={classes.paper}
dangerouslySetInnerHTML={this.createMarkeup(this.props.content)}
/>
);
}
其他回答
<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>
如果您希望以编程方式将数据写入剪贴板，可以在按钮上使用这个简单的内联onClick函数。
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
make a componant as follows :-
//react functional componant
import React, { useState } from "react";
function CopyToClipboard(props) {
const [copied, setCopied] = useState("copy");
return (
<div
className="font-medium mr-4 text-green-700 cursor-pointer"
onClick={() => {
navigator.clipboard.writeText(props.text);
setCopied("copied");
}}>
{copied}
</div>
);
}
export default CopyToClipboard;
//then use this componant anywhere
<CopyToClipboard text={"text you want to copy"}></CopyToClipboard>
//it will give a text saying "copy"`enter code here` and after clicking on that text, text provided with props will get copied
你可以做到这一点，而不需要一个外部库，例如:在一个按钮
<button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button>
对于ie11和更老的浏览器，你可能需要稍微改变一下代码，这里有一个例子:
<button
onClick={() => window.clipboardData.setData("Text", 'Copy this text to clipboard')}>
Copy
</button>
这是另一个用例，如果你想复制当前的url到你的剪贴板:
定义一个方法
const copyToClipboard = e => {
navigator.clipboard.writeText(window.location.toString())
}
调用那个方法
<button copyToClipboard={shareLink}>
Click to copy current url to clipboard
</button>
