如何使用Formik的handleChange实现多输入组件修改同一字段值

解决方案 #

你这个场景可以直接用Formik原生能力实现，不需要自己编写完整的自定义handleChange函数。
你遇到报错的核心原因有两个：

1. HTML规范要求id全局唯一，两个组件共用同一个period的id会导致Formik识别字段时出现冲突
2. Material-UI的Slider组件的onChange回调返回参数和原生输入组件不同：原生输入框的onChange第一个参数是事件对象，Formik默认的handleChange会从event.target.name和event.target.value读取字段信息和新值；但Slider的onChange第二个参数才是滑块的最新值，默认的handleChange无法正确识别。

具体修改方法

使用Formik原生提供的setFieldValue方法处理Slider的更新逻辑即可，OutlinedInput的原有逻辑不需要改动：

const formik = useFormik({
    initialValues: {
      period: 5,
    },
    // 其他Formik配置保持不变
})

<OutlinedInput
 id="period"
 name="period"
 type="number"
 onChange={formik.handleChange}
 value={formik.values.period}
/>

<Slider 
  value={formik.values.period}
  aria-label="Default" 
  min={0}
  max={20}
  onChange={(_, newValue) => formik.setFieldValue('period', newValue)}
/>

补充说明

setFieldValue是Formik官方原生API，第一个参数为目标字段名，第二个参数为要更新的新值，会自动同步Formik的状态、触发校验、更新脏值标记等逻辑，和默认handleChange的效果完全一致，不需要额外处理边界情况。

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