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