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

Question

我在很长一段时间内遇到了 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>

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

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

Answer 1

也偶然发现了这一点，就我而言，这与Dropzone被包裹在label 。 label 将点击传递给后代input 。

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

或者，虽然我不推荐它，monkey-patch Dropzone.prototype.onInputElementClick （或子类和覆盖）。 这里没有进一步的说明，以免方便人们射脚。

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

Answer 2

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

Answer 3

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

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

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