react在chrome中拖放文件重新上传问题

Question

handleChange函数在上传文件时不触发。它在firefox中运行良好。并且在同一个文件中没有问题。

import React, { useState } from "react";
import { FileUploader } from "react-drag-drop-files";
const fileTypes = ["JPG", "PNG", "GIF"];
function DragDrop() {
const [file, setFile] = useState(null);
const handleChange = (file) => {
setFile(file);
};
return (
<FileUploader handleChange={handleChange} name="file" types={fileTypes} />
);
}
export default DragDrop;

Answer 1

我已经设法通过添加属性fileOrFiles来解决这个问题，如下所示

const [fileAdded, setFileAdded] = useState(null);
<FileUploader 
fileOrFiles={fileAdded}
handleChange={ async (file)=>{
// Process file like upload to server or make inner html
setFileAdded(null);  // Resetting file this will allow to add same file
}}
/>

Answer 2

我也面临同样的问题。甚至fileorFiles也没有做任何更改。如果文件再次上传。没有触发handleChange函数。同样在上面的例子中，我们没有改变fileadd的值，它总是空的。

<FileUploader handleChange={handleChange} name="file" types={fileTypes}  fileOrFiles={fileAdded}>
</FileUploader>

Answer 3

我也面临着同样的问题，下面的解决方案是为我固定的:

const [fileAdded, setFileAdded] = useState(null);
const handleChange=(file)=>{
setFileAdded(null);
}
<FileUploader handleChange={(e) => {
setTimeout(() => {
handleChange(e)
}} 
name="file" types={fileTypes} maxSize={251} fileOrFiles={fileAdded}>
</FileUploader>