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 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
javascript 贪吃蛇实现代码
Nov 22 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 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
Zend引擎的发展 [15]
2006/10/09 PHP
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
php实现的MySQL通用查询程序
2007/03/11 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
JavaScript常用内置对象用法分析
2019/07/09 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
Python中装饰器的一个妙用
2015/02/08 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python实现自动登录
2018/09/17 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
波兰补充商店:Muscle Power
2018/10/29 全球购物
企业总经理任命书
2014/06/05 职场文书
项目建议书
2015/02/04 职场文书
团员个人总结
2015/02/26 职场文书
2015年中秋节演讲稿
2015/03/20 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
2015年党总支工作总结
2015/05/25 职场文书