問題描述

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