本文主要是介绍记录clipboard踩过的坑，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
点击复制链接的时候，可以将前面的链接复制下来，当复制成功时会打印‘内容已经复制到剪切板啦’。代码为：
<inputvalue="https://www.baidu.com/"type="text"name="urlLink"id="copyContent"
/>
<buttonid="copyBtn"data-clipboard-action="copy"data-clipboard-target="#copyContent"> 复制链接
</button>
componentDidMount(): void {this.clipboard = new Clipboard('#copyBtn');this.clipboard.on('success', e => {console.log('内容已经复制到剪切板啦');e.clearSelection();});this.clipboard.on('error', e => {console.error('无法复制', e.action);console.error('Trigger:', e.trigger);});}
componentWillUnmount(): void {this.clipboard.destroy();
}
效果为：
结果发现，初次点击点击复制链接按钮时效果是好的，但是从其他页面进入这个页面时，每次点击复制链接按钮，会打印多个console.log,mount会执行多次
在从其他页面进入这个页面时，发现console.log会++
最开始解决方案：
componentWillUnmount(): void {this.clipboard.destroy();hasBtnRepeatCopied = false;
}
componentDidMount(): void {if (hasBtnRepeatCopied) {return;}this.clipboard = new Clipboard('#copyBtn');hasBtnRepeatCopied = true;this.clipboard.on('success', e => {console.log('内容已经复制到剪切板啦');e.clearSelection();});this.clipboard.on('error', e => {console.error('无法复制', e.action);console.error('Trigger:', e.trigger);});
}
问题虽然解决了，无论从哪个页面进入这个页面，每次点击复制链接按钮时都只会执行一次componentDidMount，打印一次console.log，但是并没有从根本上解决问题，根本原因在于一段代码：
handleTypeChange = (changeType: string) => {const {changeId, changeType} = this.props;window.location.hash = `#detail/${changeType}/${changeId}?type=${changeType}`;this.setState({changeType}, () => {history.replaceState({}, '', `#detail/${changeType}/${changeId}?type=${changeType}`);});
};
将上面的window.location去掉就可以了。
这篇关于记录clipboard踩过的坑的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
