ReactJS中如何用单个函数处理重置密码表单的字段错误？

当然可以！你已经通过handleChangeField实现了输入值的统一处理，用同样的思路来统一错误处理完全可行，还能彻底解决重复代码、性能不佳的问题。下面是具体的实现步骤：

1. 将分散的错误状态合并为一个对象 #

首先，把你现在分散的hasErrorMother这类单独状态，合并成一个错误状态对象，用键值对来管理每个字段的错误状态：

import { useState } from 'react';

// 初始化错误状态，对应每个必填字段
const [errors, setErrors] = useState({
  motherName: false,
  // 这里添加另外两个必填字段的初始错误状态，比如fatherName、firstSchool
});

2. 创建统一的错误处理函数 #

参考你写的handleChangeField，我们可以写一个柯里化的错误处理函数，接收字段名作为参数，返回对应的输入处理函数：

const handleInputError = (field) => (event) => {
  const value = event?.target?.value || "";
  // 更新对应字段的错误状态：值为空则标记为错误（true），否则清除错误（false）
  setErrors((prevErrors) => ({
    ...prevErrors,
    [field]: value.length === 0
  }));
};

这个函数的逻辑和handleChangeField完全对齐，都是通过字段名动态更新对应状态，避免为每个字段写重复的判断逻辑。

3. 更新TextField组件的属性 #

现在把原来的单独错误状态和onInput处理逻辑替换成统一的写法：

<TextField
  label="What is your mother's name?"
  className={classes.input}
  // 用错误对象的对应字段判断是否显示错误
  error={errors.motherName}
  helperText={errors.motherName ? "Required field*" : ""}
  value={data.motherName}
  // 传入对应字段名，使用统一的错误处理函数
  onInput={handleInputError("motherName")}
  onChange={handleChangeField("motherName")}
/>

其他两个必填字段的TextField只需要把字段名（比如"fatherName"）替换进去即可，完全复用同一套逻辑。

4. （可选）提交时的全量验证 #

为了避免用户跳过输入直接提交，建议在表单提交时再做一次全量验证，确保所有必填字段都已填写：

const handleSubmit = (e) => {
  e.preventDefault();
  
  // 生成所有字段的错误状态
  const newErrors = {
    motherName: !data.motherName,
    fatherName: !data.fatherName,
    firstSchool: !data.firstSchool
  };
  
  setErrors(newErrors);
  
  // 检查是否存在错误
  const hasErrors = Object.values(newErrors).some(isError => isError);
  
  if (!hasErrors) {
    // 没有错误，提交数据到服务器
    console.log("提交的数据:", data);
    // 这里写入你的服务器提交逻辑
  }
};

这种方式不仅减少了重复代码，还让状态管理更集中，后续新增字段时只需要在错误对象里添加对应初始状态，复用同一个处理函数即可，维护成本低很多。

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