表单未使用 react 和 formik 提交

Question

下面是我的模型（弹出）代码，用于将用户电子邮件地址发送到后端服务。我在我的登录组件中渲染了这个模型组件。我无法提交此表格。我不知道我在这里缺少什么，但我的其他表格工作正常。我的 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>
        </>
    );
    };

Answer 1

可能是模态组件的问题。模态框在表单内部，如果门户网站用于呈现模态框，它可能会呈现在表单外部。您可以尝试在模式中使用表单并检查它是否有效。

表单未使用 react 和 formik 提交

form is not submitting using react and formik

reactjs

react-redux

yup

formik