时间戳

首页 > 解决方案 > 反应隐藏的输入类型文件 onChange 不触发

javascript - 反应隐藏的输入类型文件 onChange 不触发

问题描述

const passFromPicToUpload = (e) =>{
        hiddenFileInput.current.click();
        console.log("one")
    }

const handleProfilePicUpload = (e) =>{
    console.log("two")

    if(e.target.files[0]){
        setImage(e.target.files[0]);
        
    }
}

 return (
     <div className="profile">
      <div className="imageContainer" >
       <a href="#" onClick={passFromPicToUpload}>
        {
          profile.avatarUrl?<Image src={profile.avatarUrl} className="profile__image"  /> :<Image src="https://i.stack.imgur.com/l60Hf.png" className="profile__image" /> 
        }
       </a>
      </div>   
     <input type="file" ref={hiddenFileInput} onChange={handleProfilePicUpload} style={{display:'none'}} /> 

 </div>
)

所以基本上文件选择窗口正在显示，但是在我选择图片后，“handleProfilePicUpload”没有触发。

标签： javascriptreactjs

解决方案

您试图onChange按click事件进行模拟。将侦听器更改为onClick：

<input onClick={handleProfilePicUpload} .. />

更清洁的解决方案是使用标签：

<input type="file" id="file" style="display:none;">
<label for="file">
   <a>Image</a>
</label>

推荐阅读