Ref ios兼容

#1
    <input
          style={{
            display:'none'
          }}
          ref={(input) => { this.imageInput = input }}
          type='file'
          accept='image/*'
          onChange={this.handleImageChange}
        />
        <div onClick={this.addImage}>


    addImage = () => {
    this.imageInput.click()
  };

安卓这部分没有问题,ios则需点击多次才能打开。请教下是如何解决?

#2

你实现思路不太对,应该设置input的opacity为0,然后覆盖在div上。建议,换种实现

1 Like
#3

嗯,多谢,是个挺好的思路。原问题我通过dom原生的方法解决了

  addImage = () => {
    const event = document.createEvent('MouseEvents');
    event.initMouseEvent('click',false,false);
    this.input.dispatchEvent(event)
   };
#4

不能在错误的思路上越走越远。你现在兼容了,怕是后续在某些浏览器上还会遇到display none和事件相关问题。毕竟none,之后事件怎么绑定,浏览器有各自的优化策略,这些是开发关注不过来的。能少踩坑就少踩

#5

谢谢提醒,。不过浏览器优化会处理dispaly属性为none的标签?

#6

Box Layout Modes: the display property,none了之后,subtree omitted from box tree。只规定了表现形式。并没看到事件细节,所以应该是浏览器各自实现了

#7

嗯嗯,多谢解答!