一個容器組件：
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 點(diǎn)擊：
...
handleFileInputClick = (event) => {
event.preventDefault()
this.inputElement.current.click()
}
render() {
return (
...
<input hidden type="file" ref={this.inputElement}/>
<a onClick={this.handleFileInputClick}>上傳文件</a>
...
)
}
...
