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

Question

我遇到了关于 react-dropzone 的问题已经有一段时间了。

首先，让我们通过视频直接了解问题：https://drive.google.com/open?id=1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH-os 每当我网站上有文件输入时，文件选择窗口会打开两次，这不是无限循环，只是两次。

以下是我用于此下拉区域的代码：

                    <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>

每次我放下甚至点击输入框本身时，都会发生不必要的事件。如果需要更多信息，我很乐意分享代码。

- Emmanuel Scarabin

Answer 1

我也碰到了类似的问题，我的情况是由于Dropzone被包含在一个label标签中。 label会将点击事件它的子input。

解决方法是删除父级label（或更改为div或其他）。

或者，虽然我不建议这样做，您可以对Dropzone.prototype.onInputElementClick进行猴子补丁（或子类化和覆盖）。为了避免帮助人们弄巧成拙，此处不再提供进一步的说明。

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

- futpib

---

谢谢你！救了我的一命。 - Andi

非常好的建议，谢谢！我在标签点击事件上添加了 preventDefault。 - Kotodid

Answer 2

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

- Samiul

Answer 3

这个问题已经在 react-dropzone 10.1.3 版本 中得到解决。

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

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

- Yuci