React复制到剪贴板的示例代码


Posted in Javascript onAugust 22, 2017

本文介绍了React复制到剪贴板可以使用插件copy-to-clipboard,分享给大家,具体如下:

参考API文档

安装

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

使用

const App = React.createClass({
 getInitialState() {
  return {value: '', copied: false};
 },


 onChange({target: {value}}) {
  this.setState({value, copied: false});
 },


 onCopy() {
  this.setState({copied: true});
 },


 render() {
  return (
   <div>
    <h1>CopyToClipboard</h1>

    <input value={this.state.value} size={10} onChange={this.onChange} /> 

    <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
     <span>Copy to clipboard with span</span>
    </CopyToClipboard> 

    <CopyToClipboard text={this.state.value} onCopy={this.onCopy}>
     <button>Copy to clipboard with button</button>
    </CopyToClipboard> 


    {this.state.copied ? <span style={{color: 'red'}}>Copied.</span> : null}

    <br />

    <textarea style={{marginTop: '1em'}} cols="22" rows="3" />

   </div>
  );
 }
});

const appRoot = document.createElement('div');

appRoot.id = 'app';
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

React复制到剪贴板的示例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
javascript控制台详解
Jun 25 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
详解React中setState回调函数
Jun 14 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
从原生JavaScript到React深入理解
Jul 23 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 #Javascript
vue.js异步上传文件前后端实现代码
Aug 22 #Javascript
node中koa中间件机制详解
Aug 22 #Javascript
理解javascript async的用法
Aug 22 #Javascript
React Native之TextInput组件解析示例
Aug 22 #Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 #Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
phpize的深入理解
2013/06/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python监控键盘输入实例代码
2018/02/09 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
Django缓存Cache使用详解
2020/11/30 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
大学校务公开实施方案
2014/03/31 职场文书
环保建议书200字
2014/05/14 职场文书
授权委托书格式范文
2014/08/02 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
2015年企业新年寄语
2014/12/08 职场文书
先进学校事迹材料
2014/12/30 职场文书
检察院起诉意见书
2015/05/20 职场文书
跳高加油稿
2015/07/21 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript