我使用的是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()
}
当前回答
针对React开发者
const preventCopyPasteBody = (state) => {
document.addEventListener(state, (evt) => {
if (evt.target.id === 'body') {
evt.preventDefault();
return false;
}
return false;
}, false);
}
preventCopyPasteBody ("contextmenu")
preventCopyPasteBody ("copy")
preventCopyPasteBody ("paste")
preventCopyPasteBody ("cut")
<Typography id="body" variant="body1" component="div" className={classes.text} style={{ fontSize: fontSize }}>{story}</Typography>
其他回答
针对React开发者
const preventCopyPasteBody = (state) => {
document.addEventListener(state, (evt) => {
if (evt.target.id === 'body') {
evt.preventDefault();
return false;
}
return false;
}, false);
}
preventCopyPasteBody ("contextmenu")
preventCopyPasteBody ("copy")
preventCopyPasteBody ("paste")
preventCopyPasteBody ("cut")
<Typography id="body" variant="body1" component="div" className={classes.text} style={{ fontSize: fontSize }}>{story}</Typography>
我采取了和上面一些非常相似的方法，但我认为它更具体一些。在这里，父组件将作为道具传递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>
);
};
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。剪贴板是由大量浏览器支持的，看这里支持的浏览器
这是我的代码:
import React from 'react'
class CopyToClipboard extends React.Component {
textArea: any
copyClipBoard = () => {
this.textArea.select()
document.execCommand('copy')
}
render() {
return (
<>
<input style={{display: 'none'}} value="TEXT TO COPY!!" type="text" ref={(textarea) => this.textArea = textarea} />
<div onClick={this.copyClipBoard}>
CLICK
</div>
</>
)
}
}
export default CopyToClipboard
我个人认为没有必要为此建立一个图书馆。看看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 hook重写
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>
);
}
