Question

在下载文件将停止获取后，我有一个停止“加载程序”的问题。在我的情况下，handleDownload()之后，加载程序仍显示在屏幕上，因为单击按钮后状态变为true。
内部render（）

 <div className={`upload-file ${isLoading ? "is-loading-upload" : ""}`}>
      <div className="loader">
           <div className="icon" />
      </div>
  ...
  <button
    className="btn btn-block btn-sm btn-outline-success"
    onClick={() => this.handleDownload(file)}>
     Dowload
  </button>
 </div>

handleDownolad（）

  handleDownload = file => {
    Axios.get("/api/files/download", { responseType: "blob", params: { file } })
      .then(res => res.data)
      .then(response => {
        const url = window.URL.createObjectURL(new Blob([response]));
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", file);
        document.body.appendChild(link);
        link.click();
        this.setState({ isLoading: true });
        console.log(file);
      });
  };

一开始isLoading的状态为true，在我得到一些数据之后，它变得虚假，直到触发handleDownload()。

Answer 1

请检查

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<p>Hello everybody!</p>

<p>Translate this page:</p>

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<p>You can translate the content of this page by selecting a language in the select box.</p>

</body>
</html>

反应：从api获取文件完成后如何关闭“加载程序”？

1 个答案: