react复制内容到剪贴板

这里只讲一个react的实现方式，我们使用react-copy-to-clipboard

首先安装 react-copy-to-clipboard

npm install --save react react-copy-to-clipboard

或者

cnpm install --save react react-copy-to-clipboard

或者

yarn add  react-clipboard

使用 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() {return (<div><input value={this.state.value}onChange={({target: {value}}) => this.setState({value, copied: false})} /><CopyToClipboard text={this.state.value}onCopy={() => this.setState({copied: true})}><span>Copy to clipboard with span</span></CopyToClipboard><CopyToClipboard text={this.state.value}onCopy={() => this.setState({copied: true})}><button>Copy to clipboard with button</button></CopyToClipboard>{this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}</div>);}
}const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

注意事项

npm 5以上，和cnpm安装会有问题。可以尝试 yarn安装，或者把 npm降级到 4,安装完以后，在升级到5。

兼容性

除了 opera 和 UC 浏览器支持性不好，其他浏览器兼容性都可以。

参考网址

这个可以看看npmjs 上面的具体解释 https://www.npmjs.com/package/react-copy-to-clipboard

react复制内容到剪贴板相关推荐

复制内容到剪贴板（复制淘口令）
复制内容到剪贴板方法一 npm地址:https://www.npmjs.com/package/copy-to-clipboard 安装插件 npm i --save copy-to-clipboa ...
JavaScript复制内容到剪贴板
原文链接:https://github.com/axuebin/ar... 最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑. 常见方法查了一下万能 ...
【JS】JavaScript复制内容到剪贴板
常见方法查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. c ...
小程序复制内容至剪贴板
小程序复制内容至剪贴板前台 <view bindtap='copyText' data-text="{{1234}}">复制</view> js copy ...
【战术性mark】JS 复制内容到剪贴板
看到这篇文章想要转载的原因是,之前想做一个Chrome插件,实现功能是特定网站监听用户复制,然后自动缀上磁力链接头是的,这玩意的作用就是你现在所想的那样.只是鉴于之前一直没搞定读写Windows剪切 ...
《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
每日 30 秒 ⏱ 复制内容到剪贴板
简介剪贴板.复制.兼容复制内容到剪贴板是前端开发过程中会经常遇到的一个需求,大部分同学开发时往往会直接打开搜索框开始寻找别人写好的组件库,而聪明的同学会开始思考问题: 产品的使用场景是什么? 是 ...
html5 复制到剪贴板兼容,JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...