React表单按Enter键无响应求助（改用form onsubmit仍无效）

问题根源分析 #

你的代码存在两个核心问题，直接导致Enter键失效、按下Enter时按钮异常禁用：

1. 按钮disabled逻辑错误：当前条件selectTab === "email" && login.email === "" && login.password === ""仅在邮箱和密码同时为空时禁用按钮，不符合表单验证的常规逻辑——应该是任一为空就禁用。加上login初始状态是空对象，login.email和login.password初始为undefined，undefined === ""结果为false，导致初始状态下按钮错误处于启用状态。
2. 状态初始化不严谨：login初始值为空对象，输入框未输入时字段为undefined，和判断空字符串的逻辑不匹配，造成状态判断混乱。

具体修复步骤 #

1. 修正login状态初始化
   将初始状态改为带空字符串的对象，避免undefined的判断问题：

   const [login, setLogin] = useState({ email: "", password: "" });
   

2. 修复按钮disabled条件
   调整逻辑为：当selectTab为email时，邮箱或密码为空（包括空字符串）就禁用按钮：

   <button
     disabled={selectTab === "email" && (!login.email || !login.password)}
     type="submit"
   >
     Login
   </button>
   

3. 确认表单提交逻辑
   你的loginUser函数已正确调用e.preventDefault()阻止默认表单提交，这部分无需修改。修复后按下Enter键会正常触发form的onSubmit事件，执行登录逻辑。

验证效果 #

修复后：

• 初始状态下按钮会被正确禁用
• 仅填写单个字段时按钮保持禁用，直到邮箱和密码都填写完成
• 按下Enter键会触发登录逻辑，和点击按钮效果一致，不会出现按钮突然禁用的情况

内容的提问来源于stack exchange，提问作者Rahil Əliyev