clipboard.on第一次监听失效，第二次成功！！！

概述：项目中遇到复制的需求，复制成功后弹出tost提示

clipboard官网地址：http://www.clipboardjs.cn/

遇到的问题：使用clipboard.on('success')的时候， 第一次复制时没有走到success的方法里去，第二次才会走success方法，所以点两次才会弹出toast

ps: 通篇写法为react写法。

初始写法：

npm install clipboard --save

import ClipboardJs from 'clipboard';

 

const handleCopyClick = (event) => {

　　const clipboard = new ClipboardJs('.copy');

　　clipboard.on('success', () => {

　　　　Message.success('复制成功')；

　　　　clipboard.destroy();　

　　})

}

<span className="copy" data-clipboard-text="复制id" onClick={handleCopyClick}>

　　<Icon type="copy" />

</span>

 

改良后写法：

把clipboard抽出去，写成一个单独的js文件

import clipboard from './clipboard.js';

 

const handleCopyClick = (id, event) => {

　　clipboard(id, event);

}

<span onClick={(event) => handleCopyClick(id, event)}>

　　<Icon type="copy" />

</span>

 

clipboard.js文件：

import ClipboardJs from 'clipboard';

 

export default function handleClipboard(text, event) {

　　const clipboard = new Clipboard(event.target, {

　　　　text: () => text;

　　});

　　clipboard.on('success', () => {

　　　　Message.success('复制成功');

　　　　clipboard.destroy();

　　});

　　clipboard.on('error', () => {

　　　　clipboard.destroy();

　　});

 

　　clipboard.onClick(event); // 解决！！

}