First React-Bootstrap Radio Button Click 未触发 Formik Form 中的 "touched"

Question

沙盒：https://codesandbox.io/s/nervous-bogdan-rdf1q

我在 Formik 表单中有一个 React-Bootstrap 无线电组。如果您单击 Option 2，您会注意到我立即在该字段上正确地收到验证错误，但我没有立即在该字段上得到 touched，我应该。相反，我必须再次单击 Option 2 单选按钮才能将其放入 Formik touched 大批。因此，如果我从那个单选按钮开始，触摸不会在我第一次点击时注册，尽管错误是（正确的）。触摸在随后的点击中注册。

        <Form.Group>
          <Form.Control type="radio"
                        id="option1"
                        name="group"
                        value="Y"
                        onChange={handleChange}
                        onBlur={handleBlur}
          />
          <Form.Label htmlFor="option1">Option 1 </Form.Label>
        </Form.Group>
        <Form.Group>
          <Form.Control type="radio"
                        id="option2"
                        name="group"
                        value="N"
                        onChange={handleChange}
                        onBlur={handleBlur}
          />
          <Form.Label htmlFor="option2">Option 2 </Form.Label>
        </Form.Group>

验证：

<Formik
  initialValues={{
  }}
  validationSchema={Yup.object().shape({
    group: Yup.string().nullable().required('Required')
                                  .matches(/^Y$/,'Option 1 must be selected')
  })}
>

Answer 1

我发现了问题。单选按钮 在选择后保持聚焦，因此 .touched 的第一次更新只会在您单击其他地方以在第一次单击后模糊控件时发生。

这可以通过

解决

  onChange={e => {
    // Note: Since radio buttons remain focused after selection,
    // we need to manually blur them to immediately update .touched
    // (including the first click)                                                                  
    e.currentTarget.blur();
    handleChange(e);
  }}

First React-Bootstrap Radio Button Click 未触发 Formik Form 中的 "touched"

First React-Bootstrap Radio Button Click is not triggering "touched" in Formik Form

reactjs

react-bootstrap

formik