Formik如何获取MultiSelect、CountryDropdown等特定组件的字段值

出现这个问题的核心原因是：Formik的Field组件默认的事件监听逻辑只适配原生表单元素的触发规则，而Multiselect、CountryDropdown这类第三方自定义组件的onChange回调返回的参数格式和原生表单元素不一致，Formik无法自动识别解析，也就没法更新对应的values字段。

可以参考以下两种方案解决： #

方案1：手动绑定值与更新逻辑（灵活度最高） #

直接引入Formik的setFieldValue方法主动更新对应字段，无需依赖Field组件的默认适配逻辑：

import { useFormikContext } from 'formik';

// 在表单组件内部先获取Formik上下文提供的方法
const { values, setFieldValue } = useFormikContext();

// 渲染Multiselect时手动绑定值和事件
<Multiselect
  fullWidth
  label="Specialities"
  isObject={false}
  options={specialities}
  placeholder="Select your specialities"
  value={values.specialities}
  onChange={(selectedOptions) => {
    // 直接调用setFieldValue更新对应字段，参数1是字段名，参数2是选中值
    setFieldValue('specialities', selectedOptions)
  }}
/>

方案2：封装适配层组件复用逻辑 #

如果多个地方需要用到该组件和Formik对接，可以封装一层适配组件，之后就可以直接用Field的component属性传入：

// 封装适配Formik规则的Multiselect组件
const FormikMultiselect = ({ field, form, ...restProps }) => {
  return (
    <Multiselect
      {...restProps}
      value={field.value}
      onChange={(selectedVal) => {
        form.setFieldValue(field.name, selectedVal)
      }}
    />
  )
}

// 业务代码调用
<Field
  fullWidth
  name="specialities"
  component={FormikMultiselect}
  label="Specialities"
  isObject={false}
  options={specialities}
  placeholder="Select your specialities"
/>

注意事项 #

• 先确认所用第三方组件的onChange返回参数格式，大部分选择类组件会直接返回选中值，不需要像原生input一样从e.target.value中取值
• 如果CountryDropdown等组件返回的是包含国家编码、名称的对象，需要提前和Yup校验的Schema字段结构对齐，避免出现校验不通过的问题

内容的提问来源于stack exchange，提问作者Oumaima Abou El Mawahib