React中添加onChange函数后输入框仍不可编辑的问题求助

嘿，我一眼就瞅到问题所在啦！你的输入框没法编辑的核心原因是表单输入框的name属性和你state里定义的字段名不匹配，咱们一步步来把它解决掉：

1. 核心问题：字段名不匹配 #

你的formData state里，存储邮箱和密码的字段是clientEmail和clientPassword，但看你的输入框代码：

<input type="email" className="form-control" name="email" value={clientEmail} placeholder="Email" onChange={handleChange} />
<input type="password" className="form-control" name="password" value={clientPassword} placeholder="Password" onChange={handleChange} />

这里的name属性是email和password，和state里的字段名完全对不上！

当handleChange触发时，[evt.target.name]会尝试去更新formData里的email字段，但你的state里根本没有这个字段，所以state完全没变化，输入框绑定的value自然不会更新，看起来就像是没法编辑一样。

修复方法 #

把输入框的name属性改成和state字段一致的：

// 邮箱输入框修改后
<input type="email" className="form-control" name="clientEmail" value={clientEmail} placeholder="Email" onChange={handleChange} />

// 密码输入框修改后
<input type="password" className="form-control" name="clientPassword" value={clientPassword} placeholder="Password" onChange={handleChange} />

2. 额外的小问题（避免后续踩坑） #

我还注意到handleSubmit的catch块里有个小错误：你写的是loading: false，但state里控制加载状态的字段是loadingSpinner，这里要改成loadingSpinner: false，不然请求失败后加载动画不会正确关闭：

.catch((err) => {
  console.log("client login api controller error: ", err);
  setFormData({ 
    ...formData, 
    errorMsg: err.response.data.errorMessage, 
    loadingSpinner: false // 修正字段名
  });
});

可选优化：用函数式更新state #

因为React的state更新是异步的，有时候直接展开formData可能会拿到旧的state值，建议用函数式更新来确保每次都基于最新的state：

const handleChange = (evt) => {
  setFormData(prevState => ({ 
    ...prevState, 
    [evt.target.name]: evt.target.value, 
    errorMsg: "", 
  }));
};

这样能避免一些奇怪的state更新问题。

改完上面这些，你的输入框应该就能正常编辑啦，提交逻辑也会更稳定～

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