React+Material-UI多步表单：字段校验通过后错误提示不自动隐藏

当前多步表单的错误提示无法实时消失的核心原因是：校验逻辑仅绑定在「点击下一步」按钮的触发流程中，输入框的onChange事件仅负责更新表单字段值，没有同步触发对应字段的实时校验，因此已经生成的错误状态不会随着用户输入内容变化自动更新，只有重新触发下一步点击、或者切换步骤重新渲染时才会重新计算错误状态。

• 抽离独立的单字段校验方法
  不要把所有校验逻辑都堆在下一步按钮的点击事件里，单独封装validateField方法，接收字段名、字段值作为入参，返回对应字段的错误文案，校验不通过返回错误提示，校验通过返回空字符串即可，所有校验规则统一维护在这个方法里，避免多端逻辑不一致，示例代码：

  // 单字段校验逻辑
  const validateField = (fieldName, fieldValue) => {
    switch (fieldName) {
      case "userName":
        return fieldValue.trim() ? "" : "用户名不能为空";
      case "email":
        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(fieldValue) ? "" : "请输入有效的邮箱地址";
      // 其余字段的校验规则按业务需求补充
      default:
        return "";
    }
  };
  

• 给输入框的变更事件增加实时校验逻辑
  修改输入框绑定的onChange处理函数，在更新表单值的同时，调用上面封装的校验方法校验当前正在输入的字段，实时更新错误状态里的对应字段值，示例代码：

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 先更新表单存储的值
    setFormData((prev) => ({ ...prev, [name]: value }));
    // 实时校验当前输入的字段，同步更新错误状态
    const currentFieldError = validateField(name, value);
    setFormErrors((prev) => ({ ...prev, [name]: currentFieldError }));
  };
  

• 重构下一步按钮的校验逻辑
  把原来写在下一步点击事件里的零散校验逻辑，替换为遍历当前步骤所有字段、调用统一validateField方法校验的逻辑，保证校验规则和实时校验完全一致，避免规则不统一导致的异常，示例代码：

  const handleNextStep = () => {
    // 提前配置每一步骤对应的表单字段列表，比如第一步对应用户名、邮箱字段
    const currentStepFieldList = stepFieldMap[activeStep];
    const stepErrors = {};
    const hasInvalidField = currentStepFieldList.some(field => {
      const errMsg = validateField(field, formData[field]);
      stepErrors[field] = errMsg;
      return Boolean(errMsg);
    });
    setFormErrors(stepErrors);
    // 没有错误才跳转到下一步
    if (!hasInvalidField) {
      setActiveStep((prev) => prev + 1);
    }
  };
  

优化提示：onChange事件里只需要校验当前正在输入的单个字段即可，不要每次输入都全量校验所有表单字段，避免用户刚聚焦输入框还没输入内容就弹出全量错误，影响输入体验。

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