React Hook Form：按回车键触发登录表单验证并获取更新值

首先明确：你的代码其实已经支持按ENTER键触发表单提交和验证了。HTML表单的默认行为就是——当表单内存在type="submit"的按钮时，在输入框按下ENTER键会自动触发<form>的onSubmit事件，而你已经把onSubmit绑定了handleSubmit(handleLogin)，此时handleLogin会接收到最新的表单输入值，和点击登录按钮的效果完全一致。

如果实际使用中发现按ENTER没生效，检查这几点：

• 确保所有输入框都包裹在<form>标签内部
• 表单内存在type="submit"的按钮（你的代码里已经满足）
• 没有额外代码阻止了表单的默认submit行为

另外，推荐用React Hook Form内置的验证规则替代手动判断，更符合库的设计逻辑，也能减少冗余代码：

修改后的代码示例 #

import { useForm } from "react-hook-form";

function Login() {
  // 解构formState获取错误信息
  const { register, handleSubmit, formState: { errors } } = useForm();

  // 仅当验证通过时才会执行此函数
  const handleLogin = async (entry) => {
    console.log("验证通过，开始登录:", entry);
    // 此处编写登录逻辑，比如调用后端接口
  };

  return (
    <form onSubmit={handleSubmit(handleLogin)}>
      <div>
        <label>Username</label>
        <div>
          <input
            className="login-input"
            type="text"
            id="username"
            // 注册字段时添加验证规则
            {...register("username", {
              required: "用户名不能为空",
              minLength: { value: 1, message: "用户名不能为空" }
            })}
          />
          {/* 显示错误提示 */}
          {errors.username && <span style={{ color: 'red' }}>{errors.username.message}</span>}
        </div>
      </div>

      <div>
        <label>Password</label>
        <div>
          <input
            className="login-input"
            type="password"
            id="password"
            {...register("password", {
              required: "密码不能为空",
              minLength: { value: 1, message: "密码不能为空" }
            })}
          />
          {errors.password && <span style={{ color: 'red' }}>{errors.password.message}</span>}
        </div>
      </div>

      <button type="submit" className="submit-btn">
        Login
      </button>
    </form>
  );
}

export default Login;

关键说明 #

1. 自动触发验证：不管是点击登录按钮还是按下ENTER键，handleSubmit都会先自动执行register中定义的验证规则，验证通过后才会调用handleLogin，并传入最新的表单值。
2. 错误信息展示：通过formState.errors可直接获取验证失败的信息，无需手动判断空值，代码更简洁。
3. 最新值的保证：React Hook Form会自动跟踪表单输入变化，handleLogin接收的entry一定是触发提交时的最新输入值，不受触发方式影响。

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