React选择给予forming.touch问题

Question

大家好，我在我的项目中使用react select以及Formik和Yup进行验证。问题是，尽管我在通过Yup验证后在控制台中看到错误对象中有错误，但我无法在前端上显示该错误

这是下面的代码

export default function FormSection({
onContinueButton,
allFormValues,
holders,
}) {
console.log(holders, "hol12");
const formik = useFormik({
initialValues: {
firstBirthDate: "",
firstSmoker: "",
secondBirthDate: "",
secondSmoker: "",
},
onSubmit: (values, { setSubmitting }) => {
console.log(formik.errors);
console.log(formik.values, "valqwqrwe");
setSubmitting(false);
allFormValues(formik.values);
console.log(values);
},
validationSchema: validationSchemaSectionTwo,
});
const options = [
{ value: "Não", label: "Não" },
{ value: "Sim", label: "Sim" },
];
const handleChangeFirstHolder = (selectedOption) => {
formik.setFieldValue("firstSmoker", selectedOption);
};

return (
<div className="secondSection">
<form onSubmit={formik.handleSubmit}>
<React.Fragment>
<p className="tab-text">Data Nascimento</p>
<DatePicker
selected={formik.values.firstBirthDate}
onChange={date => {
formik.setFieldValue('firstBirthDate', date)
}}
className="birth-date-calendar"
dateFormat="dd-MM-yyyy"
name="firstBirthDate"
placeholderText="DD-MM-AAAA"
onBlur={formik.handleBlur}
/>
{formik.errors.firstBirthDate && formik.touched.firstBirthDate && (
<div className="formik-errors">{formik.errors.firstBirthDate}</div>
)}

<p className="tab-text">É fumador?</p>
<Select
value={formik.values.firstSmoker}
name="firstSmoker"
onChange={handleChangeFirstHolder}
options={options}
className="select-smoker"
onBlur={formik.handleBlur}
/>
{formik.errors.firstSmoker && formik.touched.firstSmoker && (
<div className="formik-errors">{formik.errors.firstSmoker}</div>
)}
</React.Fragment>

<br />
</form>
</div>
);
}

我也试过

onBlur={()=> {
formik.setTouched({ firstSmoker: true });
}}

但这种方法的作用是一旦我犯规在<Select/>标签上，但随后它将formik.touched.firstBirthDate设置为未定义的

Answer 1

你已经有一段时间没有问这个问题了，但我认为这个问题值得回答，所以其他人也可以把它作为参考。

我的解决方案是使用setFieldTouched方法，而不是setTouched。从Formik文档中，setFieldTouched强制设置字段的触摸状态，这对于创建自定义输入模糊处理程序非常有用。另一方面，setTouched期望完全设置被触摸对象的值。

因此，在React Select:中使用它

onBlur={() => { 
formik.setFieldTouched("firstSmoker")
}}