React中Formik的handleChange无法更新Semantic UI React下拉框值如何解决

Semantic UI React的Form.Select组件的onChange回调参数不符合Formik默认handleChange的入参要求：

• 原生Input的onChange仅返回1个事件对象，Formik的handleChange会从event.target中读取name、value属性更新对应字段
• 而Form.Select的onChange会返回2个参数，第一个参数是原始事件对象，第二个参数才是包含当前组件name、value、options等属性的配置对象，原始事件对象的target中没有正确的选中值，因此默认handleChange无法读取到有效值完成更新

推荐两种通用解决方式，按需选择即可：

• 方案1：使用Formik提供的setFieldValue方法手动更新字段，这是兼容性最高的写法
  修改组件代码如下：

<Form.Select 
  type="text"
  placeholder="Repartidor" 
  name="deliverer"
  options={deliverersForDropdown}
  search
  onChange={(e, data) => setFieldValue('deliverer', data.value)}
  error={errors.deliverer}
  value={values.deliverer}
/>

注意需要先从Formik的上下文或者useFormik返回值中解构出setFieldValue方法。

• 方案2：适配参数后调用原生handleChange
  如果不想引入setFieldValue，可以将第二个参数的属性包装为类target对象传入handleChange：

onChange={(e, data) => handleChange({ target: { name: data.name, value: data.value } })}

额外注意事项 #

要保证Formik初始值中deliverer的类型与options中value的类型完全匹配，例如如果deliverer.id是数字类型，初始值不能设置为空字符串，否则会出现选中后无法回显的问题。

内容的提问来源于stack exchange，提问作者César Cigarroa