表单未使用 react 和 formik 提交

问题描述

下面是我的模型（弹出）代码，用于将用户电子邮件地址发送到后端服务。 我已经在我的登录组件中呈现了这个模型组件。 我无法提交此表格。我不知道我在这里缺少什么，但我的其他表格工作正常。我的 Yup 验证工作正常，但是当我单击“发送”按钮时，即使该字段已验证，它也不会进入 onSubmit 处理程序。

    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>
        </>
    );
    };

解决方法

可能是因为 Modal 组件。模态在表单内，如果使用门户来呈现模态，它可能会在表单外呈现。您可以尝试在模态中使用表单并检查它是否有效。