我正在使用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()
}
如果您想要以编程方式将数据写入剪贴板，请在按钮上使用此简单的内联 onClick 函数。
onClick={() => {navigator.clipboard.writeText(this.state.textToCopy)}}
navigator.clipboard 只有在页面来源于安全环境（即HTTPS或localhost）时才能起作用。如果需要检查，可以使用 window.isSecureContext。请注意，翻译过程中尽量保持原意不变，使内容易懂且简洁明了。 - aryanmnavigator.clipboard 的支持已经足够普及了。 - basse就我个人而言，我不认为需要专门为此编写一个库。查看 http://caniuse.com/#feat=clipboard ，现在已经得到了广泛的支持，但是您仍然可以执行诸如检查当前客户端中是否存在该功能，并在不存在时简单地隐藏复制按钮等操作。
import React from 'react';
class CopyExample extends React.Component {
constructor(props) {
super(props);
this.state = { copySuccess: '' }
}
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the whole text area selected.
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
};
render() {
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={this.copyToClipboard}>Copy</button>
{this.state.copySuccess}
</div>
}
<form>
<textarea
ref={(textarea) => this.textArea = textarea}
value='Some text to copy'
/>
</form>
</div>
);
}
}
export default CopyExample;
更新：在 React 16.7.0-alpha.0 中使用 React Hooks 进行重写
import React, { useRef, useState } from 'react';
export default function CopyExample() {
const [copySuccess, setCopySuccess] = useState('');
const textAreaRef = useRef(null);
function copyToClipboard(e) {
textAreaRef.current.select();
document.execCommand('copy');
// This is just personal preference.
// I prefer to not show the whole text area selected.
e.target.focus();
setCopySuccess('Copied!');
};
return (
<div>
{
/* Logical shortcut for only displaying the
button if the copy command exists */
document.queryCommandSupported('copy') &&
<div>
<button onClick={copyToClipboard}>Copy</button>
{copySuccess}
</div>
}
<form>
<textarea
ref={textAreaRef}
value='Some text to copy'
/>
</form>
</div>
);
}
属性“select”在类型“never”上不存在。 - Alex C您可以在不使用外部库的情况下完成此操作，例如在按钮内
<button
onClick={() => navigator.clipboard.writeText('Copy this text to clipboard')}
>
Copy
</button>
对于Internet Explorer 11及更早版本的浏览器，你可能需要稍微修改代码，以下是一个示例：
<button
onClick={() => window.clipboardData.setData("Text", 'Copy this text to clipboard')}>
Copy
</button>
TypeError: Cannot read property 'setData' of undefined。 - Rodrigo R你应该考虑使用像@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'))
最简单的方法是使用 react-copy-to-clipboard npm 包。
您可以使用以下命令安装它：
npm install --save react react-copy-to-clipboard
请按以下方式使用。
const App = React.createClass({
getInitialState() {
return {value: '', copied: false};
},
onChange({target: {value}}) {
this.setState({value, copied: false});
},
onCopy() {
this.setState({copied: true});
},
render() {
return (
<div>
<input value={this.state.value} size={10} onChange={this.onChange} />
<CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
<button>Copy</button>
</CopyToClipboard>
<div>
{this.state.copied ? <span >Copied.</span> : null}
</div>
<br />
<input type="text" />
</div>
);
}
});
ReactDOM.render(<App />, document.getElementById('container'));
以下链接提供了详细的解释：
https://www.npmjs.com/package/react-copy-to-clipboard
这里有一个运行中的示例。
onpaste 事件。 - Koen使用React Hooks的最佳解决方案，无需外部库。
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>
)
}查看有关navigator.clipboard的更多文档，请单击此处 navigator.clipboard文档。大量浏览器支持navigotor.clipboard，点击此处查看支持的浏览器。
剪贴板在2021年得到了主流浏览器的很好的支持。一种方法是首先构建一个复制到剪贴板的函数，然后使用onClick事件处理程序调用它。
function copy(text){
navigator.clipboard.writeText(text)
}
string 赋值给一个名为 someText 的变量。<span onClick={() => copy(someText)}>
{someText}
</span>
writeText 返回一个 Promise，所以使用 await 来等待它完成可能是个不错的主意。 - mkupiniak你可以使用事件clipboardData集合的方法e.clipboardData.setData(type, content)。
在我看来，这是实现将某些内容放入剪贴板最直接的方法，试试这个方法（我曾在本机复制操作中使用它来修改数据）：
...
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
干杯！
编辑：为了测试目的，我添加了Codepen：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 copyToClipboard = e => {
navigator.clipboard.writeText(window.location.toString())
}
<button copyToClipboard={shareLink}>
Click to copy current url to clipboard
</button>