其他分享
首页 > 其他分享> > react主动调用input file选择文件

react主动调用input file选择文件

作者:互联网

事件描述

此组件中包涵一个原生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>
  );
}
}

标签:元素,react,file,fileInput,input,click
来源: https://www.cnblogs.com/zhif97/p/16023078.html