react主动调用input file选择文件
此组件中包涵一个原生Input file元素,它是被隐藏的,当点击我的容器元素的时候,通过refs拿到这个file input元素,调用该元素的click()方法直接就调出文件选择对话框。
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>
);
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步