Formik+Yup校验场景下React Select错误不展示、touched状态异常问题

问题根因 #

react-select 组件的 onBlur 回调返回的不是标准原生 DOM 事件，无法自动携带 name 属性值，直接传递 formik.handleBlur 时，Formik 无法识别需要标记哪个字段为已触碰状态，因此 formik.touched.firstSmoker 始终为 undefined。

解决方法 #

方案1：手动标记字段触碰状态（最简便） #

直接替换 Select 组件的 onBlur 属性，手动调用 Formik 的 setFieldTouched 方法标记 firstSmoker 为触碰状态，修改代码如下：

<Select
  value={formik.values.firstSmoker}
  name="firstSmoker"
  onChange={handleChangeFirstHolder}
  options={options}
  className="select-smoker"
  // 替换原来的 onBlur={formik.handleBlur} 为下面的代码
  onBlur={() => formik.setFieldTouched('firstSmoker', true)}
/>

方案2：封装通用react-select适配组件（适合多个Select场景） #

如果项目里有多个 react-select 和 Formik 配合使用的场景，可以封装一个通用的适配组件，避免每个Select都手动写onBlur：

const FormikSelect = ({ field, form, ...props }) => {
  return (
    <Select
      {...props}
      name={field.name}
      value={field.value}
      onChange={(option) => form.setFieldValue(field.name, option)}
      onBlur={() => form.setFieldTouched(field.name, true)}
    />
  )
}

// 业务代码里使用的时候配合 Formik 的 Field 组件即可
<Field name="firstSmoker" component={FormikSelect} options={options} />

补充注意点：你当前 initialValues 里 firstSmoker 初始值为空字符串，而 react-select 选中后的值是 {value: xxx, label: xxx} 格式的对象，建议把初始值改为 null 避免出现选中态不匹配的异常：

initialValues: {
  firstBirthDate: "",
  firstSmoker: null, // 从空字符串改为null
  secondBirthDate: "",
  secondSmoker: null,
}

内容的提问来源于stack exchange，提问作者RRR uzumaki