如何解决表单未使用 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 组件。模态在表单内,如果使用门户来呈现模态,它可能会在表单外呈现。您可以尝试在模态中使用表单并检查它是否有效。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。