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 将点击传递给后代inputs。

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

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

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

Answer 2

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