MUI+Formik表单提交前获取字段值时字段为空的问题求解

问题原因 #

你在自定义onChange事件时，完全覆盖了Formik默认的handleChange方法，没有把输入值同步到Formik的表单状态中，导致输入框始终无法显示输入内容。

解决方案 #

在自定义的onChange逻辑里，先调用Formik的handleChange同步输入值，再执行你的验证逻辑。这样既能保证输入框正常显示内容，又能完成实时验证。

修改后的代码示例 #

以你的输入字段为例，调整onChange部分：

<TextField
  label="目标字段"
  name="targetField"
  value={values.targetField}
  onChange={(e) => {
    // 第一步：同步输入值到Formik状态
    handleChange(e);
    // 第二步：执行自定义验证逻辑
    const currentValue = values.targetField;
    // 示例验证：判断字段是否为空
    if (!currentValue.trim()) {
      setFieldError('targetField', '该字段不能为空');
    } else {
      setFieldError('targetField', '');
    }
  }}
  error={!!errors.targetField}
  helperText={errors.targetField}
/>

额外建议 #

如果是字段验证，更推荐使用Formik的validate属性或者结合Yup的validationSchema来实现，这是Formik的标准验证方式，能避免手动处理状态同步的问题。比如：

// 自定义validate函数
const validate = (values) => {
  const errors = {};
  if (!values.targetField.trim()) {
    errors.targetField = '该字段不能为空';
  }
  return errors;
};

// 在Formik组件中传入validate
<Formik
  initialValues={{ targetField: '' }}
  validate={validate}
  onSubmit={(values) => console.log(values)}
>
  {/* 表单内容 */}
</Formik>

内容的提问来源于stack exchange，提问作者Milind Vasantrao Waghmare