reactjs - 带有formik的验证字段

Question

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

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

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

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

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

标签： reactjsreact-bootstrapformikyup

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