从 React Bootstrap 添加微调器

Question

我想向我当前使用的模态添加一个微调器。

    <Modal show={modal.show} onHide={onHideModal}>
      <form onSubmit={onImport}>
        <Modal.Header closeButton>
          <Modal.Title>View Details</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form.Group controlId="csvFile" className="mb-3">
            <Form.Label>Import CSV</Form.Label>
            <Form.Control type="file" accept='.csv, .xls, .xlsx' required className="primary mb-3" name="" onChange={onChangeImportFile} ref={inputFileRef} />
            <Button variant="primary" className="me-2" type="submit" disabled={saving===true ? false : true}>Upload</Button>
          </Form.Group>
          <Form.Group className="mb-2">
            <Form.Label>Message</Form.Label>
            <Form.Control as="textarea" readOnly value={fileError} rows={5} />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={clearModal}>
                            Clear
                        </Button>
          <Button variant="secondary" onClick={onHideModal} className="me-auto">
                            Close
                        </Button>
        </Modal.Footer>
      </form>
    </Modal>

我想点击提交，如果数据很大，它会显示微调器。截至目前，它看起来像是坏了，但过了一会儿所有数据都会发送出去。

我尝试在其中添加此内容，但我不太确定如何设置它以在单击提交按钮时显示加载。

<Spinner animation="border" role="status" variant="primary">
  <span className="visually-hidden">Loading...</span>
</Spinner>

Answer 1

尝试使用 useState 变量来改变 spinner 的出现

就像，当您单击“提交”按钮时，应该会显示微调器。

Answer 2

以下是如何将微调器添加到上传大数据时显示的模式中：

1. 添加加载状态变量：

   const [loading, setLoading] = useState(false);

2. 更新 onImport 功能：

开始上传之前将loading设置为true：

const onImport = async (event) => {
  event.preventDefault(); // prevent form submission

  setLoading(true); // set loading state to true

  // ... your existing submit logic with data processing and upload ...

  try {
    // ...

    setLoading(false); // set loading state back to false after successful upload

    // ... after successful upload logic like closing modal, showing success message etc.
  } catch (error) {
    setLoading(false); // set loading state back to false on error
    // ... error handling logic

  }
};

3. 有条件地渲染微调器：

用 React.Fragment 包裹按钮或模态主体，并仅在加载为 true 时渲染微调器：

<Modal show={modal.show} onHide={onHideModal}>
  <form onSubmit={onImport}>
    <Modal.Header closeButton>
      <Modal.Title>View Details</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <React.Fragment>
        {loading && (
          <Spinner animation="border" role="status" variant="primary">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
        )}
        <Form.Group controlId="csvFile" className="mb-3">
          ... // your existing form group content ...
        </Form.Group>
        <Form.Group className="mb-2">
          ... // your existing message form group content ...
        </Form.Group>
      </React.Fragment>
    </Modal.Body>
    <Modal.Footer>
      ... // your existing modal footer buttons ...
    </Modal.Footer>
  </form>
</Modal>

4. （可选）加载时禁用按钮：

向提交按钮添加

disabled={loading}

属性，以防止上传时进一步点击：

<Button variant="primary" className="me-2" type="submit" disabled={loading}>Upload</Button>