使用 formik 的验证字段

Question

我正在使用带有 react-bootstrap、formik 和 yup.

的表单

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

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

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

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

Answer 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
    }
 />

使用 formik 的验证字段

validation field with formik

reactjs

react-bootstrap

yup

formik