react实现一键复制功能

react实现一键复制功能_第1张图片

实现功能如上图:

input 和 button 按钮是在一个元素里面,需要点击复制的时候,复制到input 中的value值,可以在任何地方粘贴

代码:

//message 用于提示是否复制成功,是antd 自带的组件,可以直接引用
import { message } from 'antd'
  		
点击复制 } />
//一键复制功能 copyAccessKey = () => { //因为我的input框里面还有button 按钮,所以在选择节点的时候,一定要只选择input var copyDOM = document.querySelector(".inputBox input"); //需要复制文字的节点 var range = document.createRange(); //创建一个range window.getSelection().removeAllRanges(); //清楚页面中已有的selection range.selectNode(copyDOM); // 选中需要复制的节点 window.getSelection().addRange(range); // 执行选中元素 var successful = document.execCommand('copy'); // 执行 copy 操作 if(successful){ message.success('复制成功!') }else{ message.warning('复制失败,请手动复制!') } // 移除选中的元素 window.getSelection().removeAllRanges(); }

你可能感兴趣的:(react,antd)