React 文件输入只能工作一次

Question

我有一个带有文件上传输入的函数组件。如果我添加例如，此组件工作正常一个名为 1.csv 的 .csv 文件。它也适用于我之后加载的其他文件，例如 2.csv 或 3.csv，如果我更改顺序（例如，首先是 3.csv，然后是 1.cav，然后是 2.csv），一切都很好。如果我上传 1.csv，然后再次上传 1.csv，中间没有其他上传，则不会触发 onChange 事件。如果文件与前一个文件相同，有什么想法会阻止 onChange 事件吗？

我的组件：

interface UploadInputProps {
  accept?: string;
  label?: string;
  onChange?: (value: any) => void;
}

const UploadInput: React.FC<UploadInputProps> = ({ accept, label, onChange }) => {
return (
<Container style="align-items: center">
  <div className="upload-btn-wrapper">
    <label className="uploadBtn">
      <i className="fal fa-file-import uploadIcon" />
      <input type="file" name="fileUpload" title=" " accept={accept} onChange={onChange} />
      {label}
    </label>
  </div>
</Container>
);
};

我猜这是因为文件输入在反应中始终是不受控制的组件。任何想法如何触发它，即使它是同一个文件连续 x 次？

提前致谢:)

Answer 1

你可以这样做：

<input type="file" name="fileUpload" title=" " onChange={(e)=> {this.readFile(e) e.target.value=null }}/>