我正在使用 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)}}
我个人认为不需要为此建立图书馆。查看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>
);
}
您无需外部库即可完成此操作，例如：在按钮内
<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>
希望这可以帮助。
您绝对应该考虑使用上面建议的@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-clipboardnpm 包。
您可以使用以下命令安装它
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
这是一个正在运行的小提琴。