React中Material UI Select下拉框Handle Change事件不生效问题求助

核心问题点 #

• 你同时维护了两套表单状态：Formik注入的props.values和组件内部自定义的state.values，下拉选择时仅修改了组件内部state，未同步到Formik的状态管理，导致提交时拿不到最新值
• hfpType下拉框的value属性拼写错误，绑定了不存在的values.sfpType，导致选中值无法回显也无法正确更新
• withFormik初始化存在语法错误，多写了一个右括号和逗号
• 未使用Formik提供的setFieldValue方法更新下拉字段，自定义的变更处理方法仅修改了本地state，对Formik的表单数据无影响
• mapPropsToValues中存在键名拼写错误，hysicalName少了首字母p，和后续字段取值不匹配

修复步骤 #

1. 删除冗余的本地state：移除组件构造函数中自定义的values状态，全程使用Formik注入的props.values作为唯一数据源
2. 修正withFormik的语法和配置错误：

const formikEnhancer = withFormik({
  // 参数重命名为props避免和Redux state混淆，修正键名拼写错误
  mapPropsToValues: (props) => ({
    physicalName: props.tweakDataCollection.physicalName || "",
    hashfpType: props.tweakDataCollection.hashfpType || "",
    address: props.tweakDataCollection.address || "",
    zocId: props.tweakDataCollection.zocId || "",
    hfpType: props.tweakDataCollection.hfpType || "",
    powerSupply2: props.tweakDataCollection.powerSupply2 || "",
    powerSupply1: props.tweakDataCollection.powerSupply1 || "",
  }),
  handleSubmit: (values, bag) => {
    console.log('handleSubmit..', values)
  }
})

3. 解构Formik提供的setFieldValue方法：在render的props解构中新增该方法：

const { classes,
  tweakDataCollection,
  handleChange,
  handleSubmit,
  values,
  setFieldValue // 新增这行
} = this.props;

4. 删除自定义的下拉变更处理方法，直接用setFieldValue更新下拉字段：

• hfpType下拉的onChange改为：onChange={e => setFieldValue('hfpType', e.target.value)}，同时修正value绑定为value={values.hfpType}
• hashfpType下拉的onChange改为：onChange={e => setFieldValue('hashfpType', e.target.value)}

5. 可选优化：MenuItem的value属性统一绑定option.value，避免后续枚举值调整时出现数据不一致：

{hfp_type_collections.map(option => (
  <MenuItem key={option.value} value={option.value}>
    {option.label}
  </MenuItem>
))}

修复完成后下拉选择的值会直接同步到Formik的表单数据对象中，提交时即可拿到正确的字段值。

内容的提问来源于stack exchange，提问作者Aaditya R Krishnan