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

好好学习天天 2019-06-28

问题描述

引入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即可。

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

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

相关推荐