如何通过 ReactJS 中的另一个 Button 单击触发 <input type='file' /> 上的 onChange？

Question

<div style={{display: 'grid'}}>
    <button id='plus' onClick={???}>+</button>
    <input id='selectImage' type="file" onChange={fileSelectHandler} />
</div>

在这里，我想通过单击按钮来触发输入的 onChange 功能。如何解决这个问题？

Answer 1

您可以隐藏原始文件输入，并在单击按钮时通过 javascript 单击它。

upload() {
  document.getElementById("selectImage").click()
}

<div style={{display: 'grid'}}>
  <button id='plus' onClick={this.upload}>+</button>
  <input id='selectImage' hidden type="file" onChange={fileSelectHandler} />
</div>

Answer 2

创建参考：

//inside the constructor:
fileRef = React.createRef()
// in your input element
<input id='selectImage' type="file" onChange={fileSelectHandler} ref={this.fileRef} />

现在，

<button id='plus' onClick={this.triggerClick}>+</button>

triggerClick() {
  this.fileRef.current.click()
}