React项目中复制(react-copy-to-clipboard)

最新推荐文章于 2024-08-15 16:24:59 发布

天生欧皇张狗蛋

最新推荐文章于 2024-08-15 16:24:59 发布

阅读量7.3k

点赞数 2

分类专栏： react 文章标签： react javascript reactjs

本文链接：https://blog.csdn.net/weixin_43770430/article/details/104414591

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

react复制内容到剪贴板 ---- 依赖包react-copy-to-clipboard

一、安装插件依赖包(react-copy-to-clipboard)

npm install --save copy-to-clipboard

二、引用插件

import copy from 'copy-to-clipboard';

三、实际项目应用

import React, { Component } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, message } from 'antd';
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
    	value: '要复制内容',
    }
  }

  render() {
    return (
  		<>
	  		<CopyToClipboard text={this.state.value}
	          onCopy={() => message.success('复制成功~')}>
	          <Button type='primary'>复制</Button>
	        </CopyToClipboard>
  		</>
    );
  }
}