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

本文介绍了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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能

    废话不多说了,直接给大家贴代码了,具体代码如下所示: /** * Created by wuyakun on 2017/5/23. */let wxUtils = {}; /** * 是否开启右上角Menu * @param open */ wxUtils.optionMenu = function (open = true) { if (open) { openOptionMenu(); } else { disabledOptionMenu(); } }; /** * 是否禁用右上角 */

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

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

    本文介绍了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({

  • React+EggJs实现断点续传的示例代码

    技术栈 前端用了React,后端则是EggJs,都用了TypeScript编写. 断点续传实现原理 断点续传就是在上传一个文件的时候可以暂停掉上传中的文件,然后恢复上传时不需要重新上传整个文件. 该功能实现流程是先把上传的文件进行切割,然后把切割之后的文件块发送到服务端,发送完毕之后通知服务端组合文件块. 其中暂停上传功能就是前端取消掉文件块的上传请求,恢复上传则是把未上传的文件块重新上传.需要前后端配合完成. 前端实现 前端主要分为:切割文件.获取文件MD5值.上传切割后的文件块.合并文件.暂

  • react实现Radio组件的示例代码

    react实现Radio组件的示例代码

    本文旨在用最清楚的结构去实现一些组件的基本功能.希望和大家一起学习,共同进步 效果展示: 测试组件: class Test extends Component { constructor(props) { super(props) this.state = { active:1 } } onGroupChange(value) { this.setState({ active: value }) } render() { return ( <div> <RadioGroup onChan

  • React中前端路由的示例代码

    React中前端路由的示例代码

    目录 一. url是什么 二. 使用步骤 一. url是什么 访问不同url, 展示不同的组件 二. 使用步骤 安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4.3.1 --save) 两个js文件,分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js:访问localhost:3000/l

  • 30行代码实现React双向绑定hook的示例代码

    目录 使用Proxy代理数据 使用useRef创建同一份数据引用 添加更新handler 去除多次Proxy 添加缓存完善代码 总结 Sandbox 示例 Vue和MobX中的数据可响应给我们留下了深刻的印象,在React函数组件中我们也可以依赖hooks来实现一个简易好用的useReactive. 看一下我们的目标 const CountDemo = () => { const reactive = useReactive({ count: 0, }); return ( <div onCl

  • 利用React实现虚拟列表的示例代码

    利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • Unity移动端的复制要这么写示例代码

    前言 Unity官网提供了详尽的文档和丰富的教学视频,昨天跟着视频做了一个简单的3d游戏"roll-a-ball".游戏涉及了许多Unity的基本知识,用来入门很不错. 本文主要给大家了关于Unity移动端的复制的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 游戏上线很久了,有些玩家慢慢就流失了,为了让刚流失的玩家再度回归所以做了召回功能!如果一个200级的玩家10天没上线且成功召回的,就会给予召回玩家丰厚的奖励! Q:那如何召回这个流失的玩家呢? A:召回

  • React Native 集成jpush-react-native的示例代码

    React Native 集成jpush-react-native的示例代码

    jpush-React-native是极光推送官方维护的一个插件,github地址:https://github.com/jpush/jpush-react-native 一.手动配置 1.集成插件到项目中 npm install jpush-react-native --save rnpm link jpush-react-native Android 使用 android Studio import 你的 react Native 应用(选择你的 React Native 应用所在目录下的

  • JS将制定内容复制到剪切板示例代码

    复制代码 代码如下: function copyText() { //复制内容 var txt = document.getElementById("table2").rows[1].cells[0].innerHTML; //去除空格 txt = txt.replace(/ /," "); //去除换行 txt = txt.replace(/<BR><BR>/," "); if (window.clipboardData

  • 多浏览器兼容性比较好的复制到剪贴板的js代码

    对于非ie浏览器他是用flash来实现的,js代码如下: 复制代码 代码如下: <script type="text/javascript"> function copy_code(copyText) { if (window.clipboardData) { window.clipboardData.setData("Text", copyText) } else { var flashcopier = 'flashcopier'; if(!docum

随机推荐