Html ReactJS中的图像上传表单

你知道为什么当我点击

标签时它不起作用，而当我点击

标签时它却起作用吗？使用ReactJS

另外，如果我让按钮工作，

这个.uploadFile

将无法从

标记访问该文件

<form className="" onSubmit={this.uploadFile}>
  <div className="img-wrapper">
    <UserAvatar userId={ currentUser._id } imageId={ currentUser.profile.picture } size="small" fSize="small" shape="circle" />
    <input type="file" name="avatar" ref="imageInput" accept="image/png, image/jpeg"  multiple="false" />
    <button type="submit" className="">Edit pic</button>
  </div>
</form>

编辑图片

试试这个：

<div className="img-wrapper">
  <UserAvatar userId={ currentUser._id } imageId={ currentUser.profile.picture } size="small" fSize="small" shape="circle" />
  <input type="file" name="avatar" onChange={ this.uploadFile } ref="imageInput" accept="image/png, image/jpeg"  multiple="false" />
</div>

这是您/我们最初拥有的，但我也希望当我单击实际图片旁边的一些文本时，它能够打开/上载文件，即“单击以更改图片”。没有错误，只是不起作用。submit没有触发标记中的onSubmit={this.uploadFile}。是否绑定（this）函数？。。或者在ES7语法中

：：this.uploadFile

当我说不工作时，我的意思是标记不工作，但and确实工作，因此它不是.bind（）问题。