How to submit a form with a modal?
Question
I have a form made in react, using reduxForm that when submitting, opens a modal for validation, I put this modal in a component and if the user confirm the button in modal, the main form needs to be submitted and the modal closed.
I try with !show on onCancel, but that didn't work.
This is the main form:
<Form className="user-form" readOnly={isReadOnly}>
<ConfirmModal show={showModal} />
...
<Button
type="button"
onClick={submitForm}
/>
</Form>
Here is the validation to open the modal
const submitForm = () => {
openModal ? showModal : isReadOnly ? () => {} : handleSubmit();
};
This is the modal component
const ConfirmModal = (show) => {
const onConfirm = () => {
console.log('submit form');
};
const onCancel = () => {
console.log('cancel form');
};
return (
<Dialog open={show}>
<Body>
// Modal Content
</Body>
<Footer>
<Button onClick={() => onCancel()}>
Cancel
</Button>
<Button onClick={() => onConfirm()}>
Submit
</Button>
</Footer>
</Dialog>
);
};
export default ConfirmModal;
How can I submit the form through the modal submit?
Thanks!!
1 answers
solution1
0 2022-09-01 21:09:08
Just wrap the button tag that should submit the form inside a form element with onSubmit={submitForm} and set the type of the Button to submit
<Form onSubmit={submitForm}>
<Button type="submit" onClick={() => onCancel()}>
Cancel
</Button>
</Form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.