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