我想使用react js创建复制到剪贴板的内容,但我设计为 包含“复制”字词的文本框,当我单击此复制字词时,它更改为要复制 并且文本框值将被复制
答案 0 :(得分:0)
对于React中的剪贴板交互,我使用clipboard-polyfil。很好,因为它提供了可以在所有浏览器上使用的polyfill,而某些内置函数则无法使用,例如document.execCommand("copy")
和navigator.clipboard.write()
。
将此包与react一起使用的最简单方法是制作一个自定义组件,将要复制的字符串作为prop传递,然后使用clipboard.writeText(this.props.stringValue);
答案 1 :(得分:0)
您可以使用ref
,document.execCommand('copy')
来做到这一点。
import React from 'react';
class CopyExample extends React.Component {
constructor(props) {
super(props);
this.state = { copySuccess: '' }
}
copyToClipboard = (e) => {
this.textArea.select();
document.execCommand('copy');
e.target.focus();
this.setState({ copySuccess: 'Copied!' });
};
render() {
return (
<div>
{
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;
答案 2 :(得分:0)
我个人使用的是react-copy-to-clipboard
1-使用npm安装它:
npm install --save react react-copy-to-clipboard
2-将其导入您的文件:
import {CopyToClipboard} from 'react-copy-to-clipboard';
3-现在您可以用<CopyToClipboard>
组件包裹组件
它还提供onCopy
可选的回调函数。