React 实战 | js如何点击按钮实现一键复制

复制按钮，使用antd的

<Icon type="copy" />

按钮

<Icon
type="copy"
onClick={this.copy}
/>

先绑定onClick事件，具体函数实现如下

copy = () => {
var copyDOM = document.getElementById("xxx");  //需要复制文字的节点
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();
}

这样就实现了一键复制功能