从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变量来更改微调器的出现

比如，当你点击提交按钮时，微调器应该会出现。