表单未使用 react 和 formik 提交

Question

Below is my Model (popup) code to send user email address to backend service. I have rendered this Model component in my Login Component. I am not able to submit this form. I don't know what i am missing here but my other forms are working fine. My Yup validations are working fine but when i click on "send" button, its not going inside onSubmit handler even if the field is validated.

    import React from 'react';
    import { Formik, Field, Form, ErrorMessage } from 'formik';
    import * as Yup from 'yup';
    import { errorMessage } from '../../utility/error-messages';
    import { Button, Modal, ModalBody, ModalFooter } from 'reactstrap';

    const TextFieldComponent = (props) => {
    return (
        <div className="formGroup">
        {props.touched &&
        props.touched[props.name] &&
        props.errors &&
        props.errors[props.name] !== undefined ? (
            <ErrorMessage
            name={props.name}
            render={(msg) => <label className="errorMessage">{msg}</label>}
            />
        ) : (
            <label htmlFor={props.name}>{props.label}</label>
        )}

        <Field
            name={props.name}
            type="text"
            className={
            props.touched &&
            props.touched[props.name] &&
            props.errors &&
            props.errors[props.name] !== undefined
                ? 'formControl error '
                : 'formControl'
            }
            onBlur={props.handleBlur}
            onChange={props.handleChange}
        />
        </div>
    );
    };

    const setSchema = Yup.object({
    email: Yup.string()
        .email(errorMessage.emailValidation)
        .required(errorMessage.emailRequired),
    });

    export const ForgetPasswordModal = ({ show = false, onClose = () => {} }) => {
    debugger;
    return (
        <>
        <Formik
            initialValues={{
            email: '',
            }}
            validationSchema={setSchema}
            onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                setSubmitting(false);
            }, 400);
            }}
        >
            {({ isSubmitting, errors, touched, handleChange, handleBlur }) => {
            return (
                <>
                <Form>
                    <Modal
                    className="forgetPassPopup resetPassword"
                    isOpen={show}
                    backdrop={'static'}
                    centered
                    fade
                    >
                    <ModalBody>
                        <h3>Reset password</h3>
                        <p>
                        Enter the email.
                        </p>
                        <div className="formGroup">
                        <TextFieldComponent
                            name="email"
                            label="email"
                            errors={errors}
                            touched={touched}
                            handleBlur={handleBlur}
                            handleChange={handleChange}
                        />
                        </div>
                    </ModalBody>
                    <ModalFooter>
                        <Button
                        className="btn btnSecondary"
                        onClick={() => onClose(false)}
                        >
                        Cancel
                        </Button>
                        <Button
                        type="submit"
                        disabled={isSubmitting}
                        className="btn btnPrimary"
                        >
                        Send
                        </Button>
                    </ModalFooter>
                    </Modal>
                </Form>
                </>
            );
            }}
        </Formik>
        </>
    );
    };

Answer 1

It may be due to the Modal component. The modal is inside the form and if portal is used to render the modal it may be rendered outside the form. Can you try using form inside the modal and check if it works.