事件描述

此元件中包涵一個原生Input file元素，它是被隱藏的，當點選我的容器元素的時候，通過refs拿到這個file input元素，呼叫該元素的click()方法直接就調出檔案選擇對話方塊。

react程式碼示例：

import { Component } from "react";
import ReactDOM from "react-dom";
export default class Demo extends Component {
  handleClick = () => {
    //console.log('點選按鈕主動呼叫input框',this.fileInput.click())
    //需要獲取真實的dom元素的點選事件，而不是react例項
    ReactDOM.findDOMNode(this.fileInput).click();
  };
  handleChange = (event) => {
    console.log("測試:", event);
  };
  render() {
    return (
      <div className="container">
        <div onClick={this.handleClick}>按鈕</div>
        <input
          id="file"
          type="file"
          name="singlePhoto"
          ref={(el) => (this.fileInput = el)}
          accept="image/*"
          onChange={this.handleChange}
          style={{ display: "none" }}
        />
      </div>
    );
  }
}