React输入框异常：注册表单firstName/lastName字段无法输入

核心问题：字段名大小写不匹配 #

你的formData状态里定义的是小写n的firstname和lastname，但调用handleInputChange时传的是大写N的"firstName"和"lastName"，导致React无法正确匹配并更新对应状态字段，所以输入这两个字段时没有响应。

具体修复步骤 #

1. 统一字段命名规范
   推荐使用驼峰命名法修改状态字段，保持和调用参数一致：

const [formData, setFormData] = useState({
  email: "",
  password: "",
  firstName: "", // 改为驼峰式
  lastName: "",  // 改为驼峰式
});

对应更新FormField组件的value绑定：

<FormField
  htmlFor="firstName"
  label="First Name"
  value={formData.firstName}
  onChange={(e) => handleInputChange(e, "firstName")}
/>
<FormField
  htmlFor="lastName"
  label="Last Name"
  value={formData.lastName}
  onChange={(e) => handleInputChange(e, "lastName")}
/>

2. 修复函数语法错误
   你写的handleInputChange把箭头函数的=>写成了=，这是语法问题，需要修正：

const handleInputChange = (
  event: React.ChangeEvent<HTMLInputElement>,
  field: string
) => {
  setFormData((form) => ({
    ...form,
    [field]: event.target.value,
  }));
};

额外验证 #

确保你的FormField组件正确传递了value和onChange到内部input元素，比如组件内部结构应该类似：

export function FormField({ label, htmlFor, value, onChange, type = "text" }) {
  return (
    <div className="mb-4">
      <label htmlFor={htmlFor} className="block mb-1">
        {label}
      </label>
      <input
        id={htmlFor}
        type={type}
        value={value}
        onChange={onChange}
        className="w-full p-2 border rounded"
      />
    </div>
  );
}

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