带有formik的验证字段

Posted 2023-02-21

【中文标题】带有formik的验证字段

【英文标题】：validation field with formik

【发布时间】：2021-12-26 17:58:18

【问题描述】：

我正在使用带有 react-bootstrap、formik 和 yup 的表单。

https://stackblitz.com/edit/formik-reactbootstrap-validation-xdihwi

问题是，当我填写第一个字段时，第二个字段会自动出错，而我希望这些字段只有在未填写且仅逐个字段填写时才会出错。

如果我填写第一个字段，则第二个字段有误。

你有解决这个问题的方法吗？

【问题讨论】：

您很可能正在验证 valiateOnChange 和 validateOnBlur 上的所有字段。检查这些字段以及您每次验证的所有字段。这一切吗？您能否向我们展示代码，以便我们更好地帮助您。

【参考方案1】：

你需要使用handleBlur和touched来解决这个问题

https://stackblitz.com/edit/formik-reactbootstrap-validation-tdkizk?file=src/App.js

<Form.Control
    value=formikProps.values.comment || ''
    onChange=formikProps.handleChange
    onBlur=formikProps.handleBlur
    as="textarea"
    rows=3
    name="comment"
    isInvalid=
      !!formikProps.touched.comment &&
      !!formikProps.errors.comment
    
 />