表单未使用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

这可能是由于模态组件。模态在表单内，如果门户用于呈现模态，则可能会在表单外呈现。您可以尝试在模态内使用form并检查它是否有效吗。