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>
  )
}