[英]react-dropzone opens files chooser twice
I an encountering an issue with react-dropzone for quite a long time.我在很长一段时间内遇到了 react-dropzone 的问题。
First, let's jump straight to the problem with a video: https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os首先,让我们直接跳到视频的问题: https : //drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os
The file choser window opens twice on every file inputs of my website, it is not an infinite loop, just twice.文件选择器窗口在我网站的每个文件输入上打开两次,它不是无限循环,只是两次。
Here is the code I use for this dropzone:这是我用于此 dropzone 的代码:
<Dropzone onDrop={this.onDrop.bind(this)}
key={this.state.key}
style={{border: "none"}}>
<div className="input-file">
<label for="file">
<button type="button">Choisissez un fichier</button>
</label>
</div>
<div className={"file-name " + (!this.state.selectedOption ? '' : 'hidden')}>
Aucun fichier choisi
</div>
<div className={"file-name " + (this.state.selectedOption ? '' : 'hidden')}>
{this.state.selectedOption}
</div>
</Dropzone>
The unwanted event happens every time I drop or even when I click on the input itself每次我放下甚至点击输入本身时都会发生不需要的事件
If hope to give you guys enough information, if you need more I will more than happy to share code.如果希望给你们足够的信息,如果你需要更多,我会很乐意分享代码。
Just stumbled upon this too, in my case this was related to Dropzone
being wrapped in a label
.也偶然发现了这一点,就我而言,这与
Dropzone
被包裹在label
。 label
passes clicks to descendant input
s. label
将点击传递给后代input
。
As a workaround, you can remove the parent label
(or change it to div
or whatever).作为一种解决方法,您可以删除父
label
(或将其更改为div
或其他)。
Or, although I do not recommend it, monkey-patch Dropzone.prototype.onInputElementClick
(or subclass and override).或者,虽然我不推荐它,monkey-patch
Dropzone.prototype.onInputElementClick
(或子类和覆盖)。 No further instructions here, as to not facilitate people shooting their feet.这里没有进一步的说明,以免方便人们射脚。
Related react-dropzone
issue: https://github.com/react-dropzone/react-dropzone/issues/182 .相关的
react-dropzone
问题: https : //github.com/react-dropzone/react-dropzone/issues/182 。
This issue has been resolved in react-dropzone version 10.1.3 .此问题已在react-dropzone 版本 10.1.3 中解决。
I had the problem with version 10.1.0.我遇到了 10.1.0 版的问题。 Once I upgraded it to v10.1.3 in
package.json
, the problem is gone.一旦我在
package.json
中将它升级到 v10.1.3,问题就消失了。
"dependencies": {
"react-dropzone": "^10.1.3"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.