react-dropzone 两次打开文件选择器

Posted 2023-05-08

【中文标题】react-dropzone 两次打开文件选择器

【英文标题】：react-dropzone opens files chooser twice

【发布时间】：2018-09-15 05:09:25

【问题描述】：

我在很长一段时间内都遇到了 react-dropzone 的问题。

首先，让我们通过视频直接跳到问题：https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os

文件选择器窗口在我网站的每个文件输入时打开两次，这不是无限循环，只是两次。

这是我用于这个 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>

每次我放下甚至点击输入本身时都会发生不需要的事件

如果希望给你们足够的信息，如果你需要更多我会非常乐意分享代码。

【参考方案1】：

也偶然发现了这一点，就我而言，这与 Dropzone 被包裹在 label 中有关。 labelpasses clicks 给后代inputs。

作为一种解决方法，您可以删除父 label（或将其更改为 div 或其他）。

或者，尽管我不推荐，monkey-patch Dropzone.prototype.onInputElementClick（或子类和覆盖）。此处不做进一步说明，以免让人拍脚。

相关react-dropzone问题：https://github.com/react-dropzone/react-dropzone/issues/182。

【讨论】：

谢谢！救了我的培根。

很好的建议，谢谢！我在点击标签时添加了preventDefault。

【参考方案2】：

遇到同样的问题，后来找到了解决方法。只需将 stopPropagation 添加到父 div onClick。

【参考方案3】：

此问题已在react-dropzone version 10.1.3 中解决。

我遇到了版本 10.1.0 的问题。一旦我在package.json 将它升级到v10.1.3，问题就消失了。

"dependencies": 
  "react-dropzone": "^10.1.3"