带有formik的验证字段答案

【问题标题】：validation field with formik带有formik的验证字段
【发布时间】：2021-12-26 17:58:18
【问题描述】：

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

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

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

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

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

【问题讨论】：

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

标签： reactjs react-bootstrap formik yup

【解决方案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
    }
 />

【讨论】：