安装 react-copy-to-clipboard
npm install --save react-copy-to-clipboard
使用
import React from 'react';
import ReactDOM from 'react-dom';
import {CopyToClipboard} from 'react-copy-to-clipboard';
class App extends React.Component {
state = {
value: '',
copied: false,
};
render() {
const { value, copied } = this.props;
return (
<div>
<input value={value}
onChange={({target: {value}}) => this.setState({value, copied: false})} />
<CopyToClipboard text={value}
onCopy={() => this.setState({copied: true})}>
<span>点击复制</span>
</CopyToClipboard>
<CopyToClipboard text={value}
onCopy={() => this.setState({copied: true})}>
<button>点击复制</button>
</CopyToClipboard>
{copied ? <span style={{color: 'red'}}>复制成功!</span> : null}
</div>
);
}
}
const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);
总结:安装完成直接使用,很方便。将要复制的内容通过 test 传入组件:
<CopyToClipboard test={'要复制的内容'}>...</CopyToClipboard>