如何搭配Formik使用带isMulti属性的React-Select

核心差异：React-Select 单选模式下，onChange 回调的入参是单个选中的选项对象；开启isMulti多选模式后，入参变为选中选项组成的数组，清空所有选中项时入参为null，需要针对性调整赋值逻辑。

常用适配代码 #

根据Formik字段需要存储的内容不同，分两种写法：

• 场景1：字段存储选中项的value值数组（对接后端接口最常用）

  import { Field } from 'formik';
  import Select from 'react-select';
  
  // 选项示例
  const tagOptions = [
    { value: 'js', label: 'JavaScript' },
    { value: 'ts', label: 'TypeScript' },
    { value: 'react', label: 'React' }
  ];
  
  <Field name="tags">
    {({ form }) => (
      <Select
        isMulti
        options={tagOptions}
        // 修改onChange逻辑：提取所有选中项的value组成数组，空值兜底为空数组
        onChange={(selected) => {
          form.setFieldValue(
            'tags',
            selected ? selected.map(item => item.value) : []
          );
        }}
        // 同步适配value属性，否则选中态无法正常回显
        value={tagOptions.filter(option => form.values.tags.includes(option.value))}
        // 补全blur逻辑保证校验正常触发
        onBlur={() => form.setFieldTouched('tags', true)}
      />
    )}
  </Field>
  

• 场景2：字段存储完整的选中选项对象数组（需要用到label等额外字段时使用）

  <Field name="tags">
    {({ form }) => (
      <Select
        isMulti
        options={tagOptions}
        onChange={(selected) => {
          // 直接赋值选中项数组，空值兜底
          form.setFieldValue('tags', selected || []);
        }}
        value={form.values.tags}
        onBlur={() => form.setFieldTouched('tags', true)}
      />
    )}
  </Field>
  

注意事项：多选模式下用户清空所有选项时，onChange返回值为null，必须加空数组兜底，否则后续调用数组方法（map、includes等）会抛出类型错误。

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