移动端React-select搭配Formik时验证功能异常问题

我之前也遇到过类似的移动端兼容性问题，这大概率不是Formik或React-select的原生bug，而是移动端浏览器的事件触发时机和桌面端不一致，导致Formik的表单状态同步出现了顺序问题。

为什么会出现这个现象？ #

在移动端，首次点击选择React-select选项时，触摸事件的触发流程和桌面端的鼠标事件有差异：React-select的onChange可能会在Formik自动标记字段为touched之前就触发验证。这时候Formik的验证逻辑会认为字段“未被触碰但已修改”，从而抛出不符合预期的验证错误；而后续更改时，字段已经被标记为touched，验证逻辑就会正常执行。

修复方案 #

这里有两个可靠的解决办法，你可以根据自己的代码选择：

1. 手动同步touched状态（快速修复）

在React-select的onChange回调中，主动调用Formik的setFieldTouched方法，确保字段先被标记为已触碰，再更新字段值。修改你的Select组件代码如下：

<Select
  value={selectedOption}
  onChange={(option) => {
    // 先标记字段为已触碰
    props.setFieldTouched('color', true);
    // 再更新字段值
    props.setFieldValue('color', option.value);
  }}
  onBlur={() => props.setFieldTouched('color', true)}
  options={options}
/>

这个方法直接修正了状态更新的顺序，避免验证逻辑拿到未标记touched的字段状态。

2. 用Formik的useField钩子封装组件（更优雅的长期方案）

封装一个和Formik深度绑定的自定义Select组件，让状态同步逻辑更内聚，避免重复代码：

import { useField } from 'formik';
import Select from 'react-select';

const FormikReactSelect = ({ label, options, ...props }) => {
  const [field, meta, helpers] = useField(props);
  const { value } = field;
  const { setValue, setTouched } = helpers;

  // 匹配当前选中的选项
  const selectedOption = options.find(opt => opt.value === value);

  const handleChange = (option) => {
    setTouched(true);
    setValue(option.value);
  };

  return (
    <div>
      <label>{label}</label>
      <Select
        value={selectedOption}
        onChange={handleChange}
        onBlur={() => setTouched(true)}
        options={options}
        {...props}
      />
      {/* 显示验证错误 */}
      {meta.touched && meta.error && (
        <div style={{ color: 'red', marginTop: '4px' }}>
          {meta.error}
        </div>
      )}
    </div>
  );
};

然后在你的Formik表单中直接使用这个封装好的组件即可：

<FormikReactSelect
  name="color"
  label="Select a color"
  options={options}
/>

这个方案利用Formik的useField钩子来统一管理字段的value、touched和error状态，能更好地适配移动端的事件触发逻辑。

验证效果 #

修改后在移动端浏览器或模拟器中测试，首次选择选项时就不会再触发意外的验证错误了，后续操作也能保持正常的验证逻辑。

内容的提问来源于stack exchange，提问作者Dmitriy Movchan