fastclick 致使Ant Design框架的Upload组件在ios设备上点击异常

问题描述

引入Ant Design的上传组件，在PC端和Android端点击上传正常，而在IOS端单击没反应，双击能弹出上传组件窗口。

产生缘由

直接缘由是项目中引入了fastclick，而fastclick有点小bug，致使IOS端点击出现异常。具体缘由请看caoxuejun发表的一篇文章，分析的很好。
ps:当时遇到这个问题，在网上找了好久没找到类似的问题，后来在github ant-design的issues里找到了类似的问题，并看到了这个解释。因此遇到问题仍是多去github上看看。

解决办法

此处我用的ant-design版本为3.9.2，fastclick版本为1.0.6。
借助react ref拿到DOM元素，找到input[file]的父元素（以下图），为其添加className为needsclick便可。

在引入Upload组件的组件中，书写以下代码：

/* ref */
 constructor(props) {
   super(props);
    this.upload = React.createRef();
 }
/* 组件mount以后，拿到DOM，增长needsclick类名 */
 componentDidMount() {
   let uploadDOM = ReactDOM.findDOMNode(this.upload.current)
   setTimeout(()=> {
     let addClassDOM = uploadDOM.querySelector('.ant-upload>.ant-upload')
     addClassDOM.className += ' needsclick'
   },0)
}
/* Upload组件加上ref */ 
render() {
  return (
    <Upload ref={this.upload} >上传</Upload>
  )
}