React:在移动浏览器中，点击hadler按钮多次触发.台式电脑也不错

Question

我有一个非常简单的React页面，里面嵌入了下载按钮：

<button
type='button'
className='button'
onClick={this._downloadArchive}
style={{width: '100%'}}
>
<div style={styles.archiveButton}>
<div>Download</div>
<div>{'archive.zip'}</div>
</div>
</button>

以及相应的处理程序：

_downloadArchive = () => {
let filename = 'archive.zip';
let url = '/beta/archive32?filename=' + filename + screenDetails;
window.open(url)
};

在桌面浏览器中，它可以正常工作，但在所有移动浏览器中，处理程序被调用多次(3-4次，取决于设备和浏览器(，调用之间的延迟为100-300ms-我可以在后端日志中看到。同时，手机浏览器只下载一次文件。如何防止这种行为？

尝试使用onTouchEnd事件(检测到移动客户端(-结果是相同的

Answer 1

你能用json.parse 从文本响应解析到json吗

Answer 2

看看代码，React事件处理程序似乎没有问题。你能检查一下这是否有效吗？

_downloadArchive = (e) => {
e.stopPropogation();
let filename = 'archive.zip';
let url = '/beta/archive32?filename=' + filename + screenDetails;
window.open(url)
};

参考：https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation