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