I use the standard 'useState' for closing Modal. As long as the form does not transmit information, everything works. But when on pressing the 'submit' button I pass the function for execution, the function is executed, and stops closing the modal window. My button's cod: onClick= {(e) => Auth.handle_login(e, state)}.
My code:
<Modal show={show} **onHide={handleClose}**>
<Modal.Header closeButton>
<Modal.Title> Вход </Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group controlId='fromBasicEmail'>
<Form.Label> Email </Form.Label>
<Form.Control type='email' placeholder='Введите Email' />
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Пароль</Form.Label>
<Form.Control type='password' placeholder='Введите пароль' />
</Form.Group>
<Form.Group controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="Запомнить меня"/>
</Form.Group>
<Button variant="primary" type="submit" className='mb-5' size="lg" block
/*onClick={(e) => {e.preventDefault(); alert('32')}}*/
//onClick= {(e) => {Auth.handle_login(e, state); setModalStatus(false)}}
**onClick= {(e) => Auth.handle_login(e, state)}**
>Войти</Button>
<Form.Text className='text-muted'>
Ещё нет аккаунта? Зарегистрируйтесь
</Form.Text>
</Form>
</Modal.Body>
Related
I am using useform hook but the handlesubmit function is not being called . here is the code:
This is the useform hook i am using
const {
register,
handleSubmit,
formState: { errors },
watch,
reset, } = useForm<SellingInvoiceClientDetails>({
resolver: yupResolver(SellingInvoiceScheme),
defaultValues: {
rib: "",
cardNumber: "",
cardType: CardType.IDENTITY_CARD,},});
The function i want to call in the hundleSubmit is the following
const addSellingInvoiceClientDetails = (
sellingInvoiceDetails: SellingInvoiceClientDetails
) => {
console.log(sellingInvoiceDetails.cardType);
props.setSelectedClient();
props.updateSellingInvoiceInfo(
sellingInvoiceDetails.cardType,
sellingInvoiceDetails.cardNumber,
sellingInvoiceDetails.rib
);
handleClose(); };
The code of the Form :
return (
<>
<Modal.Header closeButton>
<Modal.Title>
<FormattedMessage id={"client.info"} />
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form onSubmit={handleSubmit(addSellingInvoiceClientDetails)}>
<Form.Group className="mb-3">
<Form.Label>
<FormattedMessage id={"card.number"} />
</Form.Label>
<Form.Control
{...register("cardNumber")}
placeholder={intl.formatMessage({ id: "card.number" })}
/>
<Form.Text className=" text-danger">
{errors.cardNumber?.message}
</Form.Text>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>
<FormattedMessage id={"card.type"} />
</Form.Label>
<Form.Check
{...register("cardType")}
type={"radio"}
label={intl.formatMessage({ id: CardType.IDENTITY_CARD })}
value={CardType.IDENTITY_CARD}
id={"identity_card"}
/>
<Form.Check
{...register("cardType")}
type={"radio"}
label={intl.formatMessage({ id: CardType.DRIVING_LICENCE })}
value={CardType.DRIVING_LICENCE}
id={"driving_licence"}
/>
<Form.Text className=" text-danger">
{errors.cardType?.message}
</Form.Text>
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>RIP</Form.Label>
<input
type="text"
className="form-control"
{...register("rib")}
placeholder="XXXXXXXXXXXXX"
/>
<Form.Text className=" text-danger">
{errors.rib?.message}
</Form.Text>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
<FormattedMessage id={"cancel"} />
</Button>
<Button
type="submit"
variant="primary"
onClick={handleSubmit(addSellingInvoiceClientDetails)}
>
<FormattedMessage id={"ok"} />
</Button>
</Modal.Footer>
</>
);
the function addSellingInvoiceClientDetails is not being excuted and when i click the Ok button nothing happens altough the handleClose function called in cancel button is working just fine.
You have put the Button element out of the form.
Try to move it inside the <form> tag
I want to add a spinner to my modal that I am currently on.
<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>
I want to click submit and it will show the spinner if the data is big. As of right now it looks like it broke but after a while all the data gets sent through.
I tried adding this inside but I am not really sure how to set it up to show the loading when I click the submit button.
<Spinner animation="border" role="status" variant="primary">
<span className="visually-hidden">Loading...</span>
</Spinner>
Try using useState variable to change the occurence of spinner
Like, when u click on the submit btn the spinner should show up.
I am using Modal from react-bootstrap in my React application, but I am unable to test the Modal.
Is there a way to test Modal using React Testing Library, without enzyme?
Here's my component
<Modal
show={show}
onHide={() => handleClose()}
className="ad-adduser-modal"
backdrop="static"
centered
>
<Modal.Header closeButton>
<Modal.Title className="headline4">Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<input
type="text"
placeholder="Username"
onChange={(e) => {
this.setState({username: e.target.value})
}}
value={username}
/>
<input
type="password"
placeholder="Password"
onChange={(e) => {
this.setState({password: e.target.value})
}}
value={password}
/>
</Modal.Body>
<Modal.Footer>
<Button
onClick={() => login()}
>
Login
</Button>
</Modal.Footer>
</Modal>
Thanks in advance!
<Form>
<Row>
<Col></Col>
<Col>
<h4>Demo Login</h4>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
<Form.Group controlId="formGroupPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" />
</Form.Group>
<Button variant="primary" type="submit">
Login In
</Button>
</Col>
<Col></Col>
</Row>
</Form>
How can I center this row on the screen?. The current items or columns are centered but I can't seem to find a way to center the row itself. I tried adding an inline style of 'align-items: enter' but that doesn't seem to work. Not even sure if I centered the columns correctly as well.
Try adding: className="align-items-end" to the row component and see if that works.
I have a modal component and form component. I am trying to pass the data using React hooks from the form back to the modal. I am having trouble doing this. Here is what I have so far -
Modal(Parent)
interface ISystem {
systemName: string;
allowNumber: number;
statusCode: string;
createdBy?: string;
createdDate?: string;
}
const ModalForm = (props) => {
const { buttonLabel, className } = props;
const [modal, setModal] = useState(false);
const toggle = () => setModal(!modal);
const addButtonHandler = () => {
toggle();
console.log(FORM DATA SHOULD BE HERE)
};
return (
<div>
<Button color="primary" onClick={toggle}>
{buttonLabel}
</Button>
<Modal
isOpen={modal}
toggle={toggle}
className={className}
centered
size="lg"
>
<ModalHeader toggle={toggle}>{buttonLabel}</ModalHeader>
<ModalBody>
<AddSystem></AddSystem>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={addButtonHandler}>
Add
</Button>{" "}
<Button color="secondary" onClick={toggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
};
export default ModalForm;
This is my Form component
const AddSystem = (props) => {
const [systemId, setSystemId] = useState("");
const [systemName, setSystemName] = useState("");
const [allowNumber, setAllowNumber] = useState("");
const [statusCode, setStatusCode] = useState("");
const [lastModifiedBy, setLastModifiedBy] = useState("");
const submitHandler = (event) => {
event.preventDefault();
};
return (
<Fragment>
<Form onSubmit={submitHandler} className="mx-auto">
<Form.Group as={Row} controlId="systemId">
<Form.Label column sm="2">
{" "}
ID{" "}
</Form.Label>
<Col sm="10">
<Form.Control
type="text"
name="systemId"
placeholder="Leave blank for new system"
value={systemId}
disabled
onChange={(event) => setSystemId(event.target.value)}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="systemName">
<Form.Label column sm="2">
{" "}
Systen Name{" "}
</Form.Label>
<Col sm="10">
<Form.Control
type="text"
name="systemName"
placeholder=""
value={systemName}
onChange={(event) => setSystemName(event.target.value)}
/>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="allowNumber">
<Form.Label column sm="2">
{" "}
Allow Number{" "}
</Form.Label>
<Col sm="10">
<Form.Control
as="select"
name="allowNumber"
value={allowNumber}
onSelect={(event) => setAllowNumber(event.target.value)}
>
<option>Choose...</option>
{["1", "2", "3", "4", "5"].map((opt) => (
<option>{opt}</option>
))}
</Form.Control>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="statusCode">
<Form.Label column sm="2">
{" "}
Status Code{" "}
</Form.Label>
<Col sm="10">
<Form.Control
as="select"
name="statusCode"
value={statusCode}
onSelect={(event) => setStatusCode(event.target.value)}
>
<option>Choose...</option>
{["Active", "Draft"].map((opt) => (
<option>{opt}</option>
))}
</Form.Control>
</Col>
</Form.Group>
<Form.Group as={Row} controlId="lastModifiedBy">
<Form.Label column sm="2">
{" "}
Last Modified By{" "}
</Form.Label>
<Col sm="10">
<Form.Control
type="text"
name="lastModifiedBy"
placeholder=""
value={lastModifiedBy}
disabled
onChange={(event) => setLastModifiedBy(event.target.value)}
/>
</Col>
</Form.Group>
</Form>
</Fragment>
);
};
export default AddSystem;
I don't want to have the button inside the form. The button needs to stay in the modal footer but somehow receive information from the form...This is so that the modal can become re-usable and have any type of form passed into it perhaps