前端React（antd pro框架）实现列表表头点击复制功能

一、先实现复制功能

起初是使用浏览器提供了 copy 命令 。

document.execCommand("copy")

如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用  copy 命令，将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效，对于 <p> 就不好用了

function copyUrl() {
    $("#copyinput").select();  // 选择对象 
    document.execCommand("Copy"); // 执行浏览器复制命令 
    alert("已复制到剪贴板！");
}

本来想用一个隐藏域#copyinput来存放复制内容，再选择（.select()）。但没什么用，被选择的#copyinput不能隐藏（display:none or  visibility:hidden or type="hidden"），或者说，隐藏的#copyinput无法被选择。

所以，只能使用临时创建组件，再删除，完美搞定。（相似的实现方式可见：JavaScript 实现复制功能）

// 隐藏域有时无用，需要临时创建一个域来实现
const $temp = document.createElement('input');
// $temp.style.cssText = 'display:none';
document.body.append($temp);
$temp.value = text;
$temp.select();
window.document.execCommand('copy');
$temp.remove();

 

二、只复制不作其实操作

现有的表格中存在排序功能，只要点击表头，必然会触发排序，需求是点击复制图标时只复制不排序。

这涉及到JavaScript 中的事件冒泡 和 事件捕获

这些知识点可自行搜索，而我们这里用到的只有事件冒泡

事件触发顺序是由内到外的，这就是事件冒泡，虽然只点击子元素，但是它的父元素也会触发相应的事件，其实这是合理的，因为子元素在父元素里面，点击子元素也就相当于变相的点击了父元素，这样理解对吧？

这里有同学可能要问了，如果点击子元素不想触发父元素的事件怎么办？肯定可以的，那就是停止事件传播---event.stopPropagation();

而React中的事件处理可以直接：

onClick = event =>{
    event.preventDefault();
    console.log(event);
}

在React中事件的绑定是直接写在JSX元素上的,不需要通过addEventListener事件委托的方式进行监听 写法上:

• 在JSX元素上添加事件,通过on*EventType这种内联方式添加,命名采用小驼峰式(camelCase)的形式,而不是纯小写(原生HTML中对DOM元素绑定事件,事件类型是小写的),无需调用addEventListener进行事件监听,也无需考虑兼容性,React已经封装好了一些的事件类型属性(ps:onClick,onMouseMove,onChange,onFocus)等
• 使用JSX语法时,需要传入一个函数作为事件处理函数,而不是一个字符串,也就是props值应该是一个函数类型数据,事件函数方法外面得用一个双大括号包裹起来
• on*EventType的事件类型属性,只能用作在普通的原生html标签上(例如:div,input,a,p等,例如:<div onClick={ 事件处理函数 }></div>),无法直接用在自定义组件标签上,也就是:,这样写是不起作用的
• 不能通过返回false的方式阻止默认行为,必须显示使用preventDefault

当给DOM元素绑定了事件处理函数的时候,该函数会自动的传入一个event对象,这个对象和普通的浏览器的对象记录了当前事件的属性和方法

在React中,event对象并不是浏览器提供的,你可以将它理解为React的事件对象,由React将原生浏览器的event对象进行了封装,对外提供一公共的API接口,无需考虑各个浏览器的兼容性

与原生浏览器处理事件的冒泡(event.stopPropatation),阻止默认行为(event.preventDefault)使用一样