react input file

1 在我的页面中有一个隐藏的input type 类型的file元素,该元素通过ref属性可以获取到,取名为this.inputFile
2 页面头部右边有一个按钮,点击该按钮,触发该this,fileInput.click()
3 但是结果却无法弹出文件选择框,真是的,这是什么问题啊,逻辑没问题啊 尴尬

class FileManage extends Component{

constructor(props){
    super(props);
    this.onHandleBack = this.onHandleBack.bind(this);
    this.showOperationSheet = this.showOperationSheet.bind(this);
}   
onHandleBack(){
    this.props.history.goBack();
}

showOperationSheet(){
    console.log('点击上传');
    if(this.fileInput){
        console.log('进入判断');
        //很神奇,必须有这行代码,才能调用图片选择,我也很无奈啊。
        console.log(this.fileInput.click());
        this.fileInput.click()
    }
};
render(){
         
    return (
        <div>
            <div onClick={this.showOperationSheet}>按钮</div>
            <div style={{display:"none"}}>
                <form action="" encType="multipart/form-data" method='POST' onSubmit={this._onSubmit}>
                    <input type="file" ref={(input)=>{this.fileInput = input}} onChange={this._onChange}/>
                </form>
            
            </div>
        </div>
        
    )
} 

}
export default FileManage

阅读 7.2k
2 个回答

贴具体代码啊,这样好难脑补

需要获取真实的dom元素的点击事件,而不是react实例
应改为:
ReactDom.findDOMNode(this.fileInput).click()

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题