3

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

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

如果希望为你们提供足够的信息，如果您需要更多信息，我将非常乐意分享代码。

4

3 回答 3

11

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

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

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

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

于 2018-09-07T17:51:31.360 回答
6

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

在此处输入图像描述

于 2020-07-02T11:12:46.633 回答
0

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

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

"dependencies": {
  "react-dropzone": "^10.1.3"
}
于 2019-04-25T11:35:10.723 回答