React下Formik库自定义Select组件onChange绑定问题求解

• 字段名不匹配：<Select> 组件的 name 属性设置为 users，但 Formik initialValues 中对应的字段是 selected，二者名称不一致导致 Formik 无法定位到需要更新的目标字段。
• 自定义组件的 onChange 回调返回结构不兼容：Formik 默认的 handleChange 方法是为原生 input 设计的，需要从事件对象的 target.name 和 target.value 中读取数据，而自定义 Select 组件（尤其是多选模式）的 onChange 通常直接返回选中值数组，没有原生事件对象的结构，因此 handleChange 无法正常解析更新。

最通用的实现方式是使用 Formik 暴露的 setFieldValue 方法手动更新指定字段，适配自定义组件的返回值逻辑：

<Select
  isDisabled={formik.values.selected.includes("All")}
  isMulti
  name="selected" // 修正name属性，和Formik字段名保持一致
  options={options}
  className="basic-multi-select"
  classNamePrefix="select"
  value={formik.values.selected} // 绑定Formik状态值，保证组件显示和Formik数据同步
  onChange={(value) => formik.setFieldValue('selected', value)} // 手动更新Formik对应字段
/>

如果你的 Select 组件返回的选中项是 {label: xx, value: xx} 格式的对象，你只需要存储 value 数组的话，可以在赋值前做一层转换：

onChange={(value) => formik.setFieldValue('selected', value.map(item => item.value))}

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