React Hook Form回车键提交及Tab键切换输入框问题求助

问题原因分析 #

• 回车键提交失效：直接调用handleSubmit(onSubmit)()未传递表单提交事件，React Hook Form无法通过事件收集表单值，导致验证失败且无法获取输入数据；全局监听回车还会触发页面其他区域的误提交。
• 输入框注册错误：代码中{...register(name)}的name变量未定义，应明确指定为"email"；多余的onChange={handleChange}会覆盖React Hook Form内置的onChange逻辑，干扰表单值收集。
• Tab切换异常：若自定义hook中存在event.preventDefault()，会阻止浏览器默认的Tab切换行为，导致输入框间无法通过Tab键跳转。

解决方案 #

1. 修复回车键提交逻辑 #

给表单添加ref，通过触发表单原生submit事件调用React Hook Form的提交流程，确保正确收集值和触发验证；同时可限制监听范围，避免全局触发。

2. 修正输入框register配置 #

明确指定register("email")，移除多余的onChange属性，让React Hook Form原生逻辑处理值收集。

3. 恢复Tab键默认切换行为 #

移除自定义hook中阻止默认事件的代码，浏览器会自动处理输入框间的Tab切换。

修改后的完整代码 #

VerifyEmail 组件 #

import React, { useRef } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useKeyDown } from "../../../hooks/useKeyDown";

const VerifyEmail = () => {
  const formRef = useRef(null);

  const schema = yup.object().shape({
    email: yup.string().required(t("email_required")).email(t("invalid_email")),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  useKeyDown(() => {
    formRef.current?.dispatchEvent(new Event("submit"));
  }, ["Enter"]);

  const onSubmit = async (data) => {
    try {
      console.log(data);
      // 此处添加提交逻辑
    } catch (error) {
      console.log("something went wrong");
    }
  };

  return (
    <>
      <form
        ref={formRef}
        className="flex flex-col"
        onSubmit={handleSubmit(onSubmit)}
      >
        <input
          name="email"
          label="email"
          {...register("email")}
          error={errors.email}
          autoComplete="off"
          placeholder="email"
          type="email"
          maxLength="50"
        />

        <div className="mt-20">
          <button type="submit">Submit</button>
        </div>
      </form>
    </>
  );
};

export default VerifyEmail;

修改后的useKeyDown Hook #

import { useEffect, useCallback } from 'react';

export const useKeyDown = (callback, keys) => {
  const onKeyDown = useCallback((event) => {
    const wasAnyKeyPressed = keys.some((key) => event.key === key);
    if (wasAnyKeyPressed) {
      callback();
    }
  }, [keys, callback]);

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [onKeyDown]);
};

关键说明 #

• 通过表单ref触发原生submit事件，和点击提交按钮的行为完全一致，保证React Hook Form能正常收集值和执行验证。
• 移除多余的onChange属性，确保React Hook Form的register逻辑正常工作。
• 不阻止键盘默认事件，浏览器会自动处理Tab键在输入框间的切换。

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