一個容器組件：

class FooContainer extends React.Component {
  ...
}

其中渲染一個隱藏的 <input>

render() {
  return (
    ...
      <input hidden type="file"/>
    ...
  )
}

在構(gòu)造函數(shù)中通過React.createRef()創(chuàng)建Refs并通過ref屬性聯(lián)系到React組件，假設(shè)需要關(guān)聯(lián)組件的變量名為inputElement。

constructor(props) {
  super.(props)
  this.inputElement = React.createRef()
}

為 <input> 添加 ref 屬性

render() {
  return (
    ...
      <input hidden type="file" ref={this.inputElement}/>
    ...
  )
}

渲染一個按鈕，并綁定它的onClick事件，在回調(diào)函數(shù)中即可通知 inputElement 點擊：

...
handleFileInputClick = (event) => {
  event.preventDefault()
  this.inputElement.current.click()
}

render() {
  return (
    ...
      <input hidden type="file" ref={this.inputElement}/>
      <a onClick={this.handleFileInputClick}>上傳文件</a>
    ...
  )
}
...