前言

最近遇到了一个Bug，使用Antd的Button组件时ant-click-animating-without-extra-node会有一个效果，会使得按钮颜色变浅，如果上传文件时选择取消上传，那么这个按钮颜色一直不变，所以测试同学提交了一个优化单过来。右边是点击后的，左边是正常的颜色

我找了一些资料，都没有找到这个取消按钮的事件如何去捕捉，如果有知道的同学麻烦指点下

一、问题说明

前端做文件上传一般都是用一个按钮+Input[file]的方式，把文件按钮隐藏起来，方便做样式，在当前项目也是如此，遇到的情况是使用Antd的Button组件时ant-click-animating-without-extra-node会有一个效果，会使得按钮颜色变浅，如果上传文件时选择取消上传，那么这个按钮颜色一直不变，具体代码如下：

<Button
	id="import_rule"
	type="primary"
	onClick={this.handleImport}
	className={styles.mb16}
>
    <Icon type="cloud-upload" />
	{formatMessage({ id: 'app.viewList.button.import' })}
</Button>
<input
 id="upload"
 type="file"
 style={{ display: 'none' }}
 onClick={this.onClickFileInput}
 onChange={this.onUploadFile}
 accept={String(FILE_TYPE)}
/>

二、解决思路

如果文件在取消上传的时候我们可以捕捉这个事件那么我们就可以刷新下按钮的状态就可以恢复颜色了，但遗憾的是我并没有找到类似的事件，Onchange事件对取消按钮不生效(我觉得不合理)，所以只能想想其他的方法，当Input被点击的时候我们可以捕捉Click事件，那么如果这个时候我们添加监听Focus事件，当用户上传文件或者取消上传时我们就可以捕获Focus事件，然后在取消监听，具体代码如下

#这个函数其实在文件上传或者取消时都会触发，所以我这里根据自己的需求做了一些处理
handleFocusCallBack = () =>{
     const { refresh_file_key } = this.state
     var inter_count = 0
     const interval_id =  setInterval(() => {
         const { isLoading } = this.state
         inter_count ++ 
         const selectedFile = document.getElementById('upload').files[0];
         if(selectedFile){
             console.log(interval_id)
             clearInterval(interval_id)
             this.setState({
                 refresh_file_key:refresh_file_key+1
             })
         }else if(inter_count==1){
             clearInterval(interval_id)
             this.setState({
                 refresh_file_key:refresh_file_key+1
             })
         }
         window.removeEventListener('focus', this.handleFocusCallBack);
     }, 1000);
 }
#当Input点击的时候添加监听器
onClickFileInput = () => {
     window.addEventListener('focus', this.handleFocusCallBack);
 }