MUI & Formik使用useField绑定组件时选中值后验证未触发问题求助

问题根因 #

• Formik 默认的字段校验触发时机为字段值变更（onChange）、字段失去焦点（onBlur）
• MUI AutoComplete、react-select 这类封装后的自定义选择组件，选中值触发的自定义 onChange 回调不会联动触发 Formik 默认的校验逻辑，此时字段的touched状态仍为未激活，只有触发原生 input 的 onBlur 事件（点击页面空白处）、或其他字段变更触发全表单校验时，才会执行当前字段的校验逻辑。

解决方案 #

在自定义选择组件的 onChange 回调中，更新完字段值后手动调用 Formik 提供的validateField方法，主动触发当前字段的校验即可，示例代码如下：

import { useField } from 'formik';
import { Autocomplete, TextField } from '@mui/material';

const FormikAutoComplete = ({ name, options, label }) => {
  // 用useField获取字段的状态、操作方法
  const [field, meta, helpers] = useField(name);
  const { setValue, validateField } = helpers;

  return (
    <Autocomplete
      options={options}
      renderInput={(params) => (
        <TextField 
          {...params} 
          label={label} 
          error={meta.touched && Boolean(meta.error)} 
          helperText={meta.touched && meta.error} 
        />
      )}
      value={field.value}
      onChange={(_, selectedValue) => {
        // 先更新表单字段值
        setValue(selectedValue);
        // 手动触发当前字段的校验
        validateField(name);
      }}
      // 保留原有的onBlur逻辑，处理用户点击后未选择直接失焦的校验场景
      onBlur={field.onBlur}
    />
  )
};

如果是使用react-select，实现逻辑完全一致，只需要在react-select的onChange回调中执行相同的操作即可。

内容的提问来源于stack exchange，提问作者Lars-Olav Vågene