前端实现一键复制

前端实现一键复制功能

第一步直接 npm install react-copy-to-clipboard 下载相应模块，然后在引入几可以使用，代码如下：

import { CopyToClipboard } from 'react-copy-to-clipboard';
import './index.scss'
class Index extends React.Component {
  state = {
    link: ''
  }
  componentDidMount(){
    this.setState({
      link: `${window.location.host}/answer/${localStorage.getItem('linkId')}`
    })
  }
  copy = ()=> {
    message.success('复制成功');
  }
  render(){
    return (
      <Result 
        icon={<SnippetsOutlined/>}
        title={<div>
                <p>评估创建已完成，可以复制以下链接分享评估</p>
                <p style={{color: '#6598FD',fontSize: '14px'}}>{this.state.link}</p>
              </div>
              }
        extra={
              <CopyToClipboard text={this.state.link}>
                <Button style={{background: '#0EB279',borderRadius: '4px', color: '#fff'}} onClick={this.copy}>复制链接</Button>
              </CopyToClipboard>
              }
      /> 
    )
  }
}