触发反应dropzone与ref不起作用 [英] trigger react dropzone with ref doesn't work

问题描述

我正在实施此图书馆：

这里有什么问题？我只想触发点击打开文件对话框，供用户选择要上传的文件。

解决方案

尝试这样。这对我来说是有用的

  triggerUploadDialog（）{
 this.photoUploadDropAreaElement.dropzone.element.click（）
} 
  

组件

 < div onClick = {this.triggerUploadDialog.bind（this）}> 
< DropzoneComponent ref = {dropArea => this.photoUploadDropAreaElement = dropArea} /> 
< / div> 
  

I'm implementing this library : https://github.com/felixrieseberg/React-Dropzone-Component

To trigger another component or element programmatically I can use refbut I got an error of photoUploadDropAreaElement is not a function using below code.

triggerUploadDialog(){
    this.photoUploadDropAreaElement.click(); // doesn't work?

    console.log(this.photoUploadDropAreaElement);
}

render() {
return(
        <div onClick={this.triggerUploadDialog.bind(this)}>
            <DropzoneComponent ref={dropArea => this.photoUploadDropAreaElement = dropArea} />
        </div>
);

The result of DropzoneComponent look like this

What's wrong here? I just want to trigger a click to open the file dialog for user to select file to upload.

解决方案

Try like this. It's work for me

triggerUploadDialog () {
    this.photoUploadDropAreaElement.dropzone.element.click()
  }

Component

<div onClick={this.triggerUploadDialog.bind(this)}>
 <DropzoneComponent ref={dropArea => this.photoUploadDropAreaElement = dropArea} />
</div>

这篇关于触发反应dropzone与ref不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！