MUI Autocomplete结合Formik：传递数据并实现表单验证

问题根源 #

MUI Autocomplete 的 onChange 回调参数和标准 HTML 输入框不同：它的第二个参数才是选中的实际值，而 Formik 的 handleChange 期望接收一个包含 target.name 和 target.value 的标准输入事件对象，直接传递会导致 Formik 无法正确识别字段信息，因此验证逻辑不生效。

解决方案 #

你可以通过两种方式让 Autocomplete 触发 Formik 的验证：

方法一：使用 Formik 内置的 setFieldValue 和 setFieldTouched（推荐）

直接调用 Formik 的 API 更新字段值并标记字段为已触碰，这样就能自动触发你配置好的验证逻辑，同时不需要维护组件内部状态（推荐用 Formik 作为单一数据源）。

修改后的 Autocomplete 代码：

<Autocomplete
  name="gender"
  id="gender"
  disablePortal
  getOptionLabel={(option) => option || ""}
  options={["Maschio", "Femmina", "Altro"]}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label="Genere"
      fullWidth
      error={Boolean(formik.errors.gender)}
      helperText={formik.touched.gender && formik.errors.gender}
    />
  )}
  // 直接绑定 Formik 的字段值，无需组件内部 state
  value={formik.values.gender}
  onChange={(event, value) => {
    // 更新 Formik 中 gender 字段的值
    formik.setFieldValue("gender", value);
    // 标记字段已触碰，触发错误提示显示
    formik.setFieldTouched("gender", true);
  }}
/>

如果确实需要保留组件内部状态，也可以在回调里同时更新：

onChange={(event, value) => {
  this.setState({ gender: value }, () => {
    formik.setFieldValue("gender", value);
    formik.setFieldTouched("gender", true);
  });
}}

方法二：构造模拟事件调用 formik.handleChange

手动构造符合 Formik handleChange 要求的事件对象，让它能识别字段名称和值：

onGenderChange = (event, value) => {
  this.setState({ gender: value }, () => {
    // 构造模拟的输入事件对象
    const mockEvent = {
      target: {
        name: "gender",
        value: value
      }
    };
    // 调用 Formik 的 handleChange 更新字段
    formik.handleChange(mockEvent);
    // 标记字段已触碰，触发验证提示
    formik.setFieldTouched("gender", true);
  });
}

对应的 Autocomplete 保持原来的绑定即可：

<Autocomplete
  name="gender"
  id="gender"
  disablePortal
  getOptionLabel={(option) => option || ""}
  options={["Maschio", "Femmina", "Altro"]}
  renderInput={(params) => <TextField {...params} variant="standard" label="Genere" fullWidth />}
  value={this.gender}
  onChange={this.onGenderChange}
  error={Boolean(formik.errors.gender)}
  helperText={formik.touched.gender && formik.errors.gender}
/>

关键说明 #

• 必须调用 formik.setFieldTouched("gender", true)，否则即使字段值不符合验证规则，helperText 也不会显示错误信息（因为它依赖 formik.touched.gender 的状态）。
• 推荐使用方法一，直接依赖 Formik 的状态管理，避免组件内部状态和 Formik 状态不一致的问题。

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