如何在事件发生后删除/清理加载的数据

Question

我想加载一个 CSV 文件并将其发送到后端。为此，我使用了react-csv-reader。我基本上加载一个文件，然后我按下另一个按钮并将数据发送到后端。我的问题是，将其发送到后端后，文件仍保持选中/上传状态。我怎样才能删除或清理它？

我的代码：

<CSVReader
  cssClass="myCSS"
  label="Choose a CSV"
  inputId="myCSV"
  inputName="myCSV"
  inputStyle={{ color: 'red' }}
  onFileLoaded={data => handleUploading(data)}
/>
//...
const handleUploading = data => {
  setSelectedFile(data);
};

正如我所说，我将文件内容放入 data 并将其发送到后端，但文件仍保持“已加载”状态。有什么办法可以清理吗？

Answer 1

在将其发送到后端后，使用document.getElementById('myCSV').value = ' 解决了它。效果很好

Answer 2

你可以用 form 包裹这个元素，然后你可以重置它，像这样：

export default function App() {
  const ref = useRef();
  return (
    <div className="App">
      <form ref={ref}>
        <CSVReader
          cssClass="btn btn-default btn-sm m-t-10 waves-effect"
          label="Seleziona un file CSV"
          inputId="leadsFile"
          inputName="leadsFile"
          inputStyle={{ color: "red" }}
          onFileLoaded={(data) => {
            console.log(data);
            ref.current.reset();
          }}
        />
      <button type="button" onClick={() => ref.current.reset()}>Submit</button>
      </form>
    </div>
  );
}

我知道这不是正确的地方，但这只是给你的一个例子