fastclick 導致Ant Design框架的Upload元件在ios裝置上點選異常
阿新 • • 發佈:2018-12-11
問題描述
引入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> ) }