React表单结合handleChange与useState无法输入的问题解决

你的问题核心是所有受控输入框都未设置name属性。

你编写的handleChange函数依赖event.target.name来匹配user对象中的对应字段，进而更新状态，但输入框缺少对应的name属性，导致[name]无法找到正确的键，状态根本没被更新，输入框的值始终停留在初始空字符串，自然无法输入内容。

解决步骤 #

给每个输入框添加和user对象属性名完全一致的name属性：

• 用户名输入框加 name="name"
• 邮箱输入框加 name="email"
• 手机号输入框加 name="phone"
• 职业输入框加 name="work"
• 密码输入框加 name="password"
• 确认密码输入框加 name="cpassword"

额外补充两个细节：

1. 提交函数postData里要加上event.preventDefault()，避免表单默认提交刷新页面
2. 解构user对象的方式是可行的，但同样要保证输入框name和属性名对应

修改后的关键代码片段 #

// 用户名输入框
<input className="myInput" type={"text"} 
  name="name"
  value={user.name}
  onChange={handleChange}  
  placeholder="Username" id="username" required></input>

// 邮箱输入框
<input className="myInput" type={"text"} 
  name="email"
  value={user.email}
  onChange={handleChange} 
  placeholder="Email" id="email" required></input>

// 手机号输入框
<input className="myInput" type={"text"} 
  name="phone"
  value={user.phone}
  onChange={handleChange} 
  placeholder="Mobile Number" id="phone" required></input>

// 职业输入框
<input className="myInput" type={"text"} 
  name="work"
  value={user.work}
  onChange={handleChange} 
  placeholder="Profession" id="work" required></input>

// 密码输入框
<input className="myInput" type={"password"} 
  name="password"
  value={user.password}
  onChange={handleChange} 
  placeholder="Password" id="password" required></input>

// 确认密码输入框
<input className="myInput" type={"password"} 
  name="cpassword"
  value={user.cpassword}
  onChange={handleChange} 
  placeholder="Confirm Password" id="cpassword" required></input>

// 提交函数补充阻止默认行为
const postData = (event)=>{
  event.preventDefault();
  // 后续的提交逻辑
}

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