Formik ReactBoostrap Form not validating

Question

我在react boostrap表单上构建了formik表单。我有一个自定义的onchange来处理输入。问题是，即使表单字段中有值，验证错误也会抛出。此外，如果键入了某个值，则错误消息不会消失。我想验证根本不起作用。请帮我一下。

这是react引导表单的代码https://react-bootstrap.github.io/components/forms/#forms-验证库

import React from "react";
import * as yup from "yup";
export default function StepByStepForm() {
const [myForm, setMyForm] = useState({});
const handleInput = (e) => {
const value = e.target.value;
const name = e.target.name;
setMyForm((prev) => ({
...prev,
[name]: value,
}));
};
const form1schema = yup.object({
company_name: yup.string().required(),
});
function Step1Form() {
return (
<Formik validationSchema={form1schema}>
{({
touched,
isValid,
isInvalid,
errors,
handleBlur,
handleChange,
values,
validateForm,
}) => (
<Form noValidate className="formstep1">
<Form.Group controlId="addCompany">
<Form.Label>Company Name*</Form.Label>
<Form.Control
name="company_name"
type="text"
value={myForm.company_name}
onChange={handleInput} // have my custom handling
isInvalid={!!errors.company_name}
/>
<Form.Control.Feedback type="invalid">
{errors.company_name}
</Form.Control.Feedback>
</Form.Group>
<div className="step-progress-btn">
<Button variant="primary" onClick={() => validateForm()}>
Validate
</Button>
</div>
</Form>
)}
</Formik>
);
}
return <div>Step1Form()</div>;
}

Answer 1

您的自定义onChange={handleInput}函数从不将值传递给Formik。

Formik在内部跟踪您的表单值，因此您不需要像现在这样使用useState方法添加它(const [myForm, setMyForm] = useState({});(。

当您将自定义onChange添加到表单时，您将更改组件状态，而Formik的状态永远不会更新，因此Yup没有要验证的值。

如果您将其添加到关闭的</Form>标签下方，您将看到Formik从未读取表单的更新值：

<pre>
{JSON.stringify(
{
touched,
isValid,
isInvalid,
errors,
handleBlur,
handleChange,
values,
validateForm
},
null,
2
)}
</pre>

Answer 2

问题是Formik Yup需要onChange={handleChange}来验证

如果您在handleChange上有自定义或附加功能，那么您需要在handleChange 上添加事件侦听器

import React from "react";
import * as yup from "yup";
export default function StepByStepForm() {
const [myForm, setMyForm] = useState({});
const handleInput = (e) => {
const value = e.target.value;
const name = e.target.name;
setMyForm((prev) => ({
...prev,
[name]: value,
}));
};
const form1schema = yup.object({
company_name: yup.string().required(),
});
function Step1Form() {
return (
<Formik validationSchema={form1schema}>
{({
touched,
isValid,
isInvalid,
errors,
handleBlur,
handleChange,
values,
validateForm,
}) => (
<Form noValidate className="formstep1">
<Form.Group controlId="addCompany">
<Form.Label>Company Name*</Form.Label>
<Form.Control
name="company_name"
type="text"
value={myForm.company_name}
onChange={(e) => {
handleChange(e);
handleInput(e);
}}
isInvalid={!!errors.company_name}
/>
<Form.Control.Feedback type="invalid">
{errors.company_name}
</Form.Control.Feedback>
</Form.Group>
<div className="step-progress-btn">
<Button variant="primary" onClick={() => validateForm()}>
Validate
</Button>
</div>
</Form>
)}
</Formik>
);
}
return <div>Step1Form()</div>;
}