React Hook Form自定义Input组件报错及值无法更新求助

问题根源 #

控制台的警告已经直接点明核心问题：自定义Input是函数组件，而React Hook Form的register方法会尝试给组件传递ref，但函数组件默认不支持接收ref，导致框架无法获取到内部真实的<input>元素引用，最终无法同步输入值到表单状态。

解决步骤 #

只需修改Input.tsx组件，使用React.forwardRef将ref转发到内部的input元素即可：

// 修改后的 Input.tsx
import { InputHTMLAttributes, forwardRef, ForwardedRef } from "react";
import styles from "./Input.module.css";

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label?: string;
  error?: string;
}

// 使用forwardRef包裹组件，接收props和ref两个参数
export const Input = forwardRef(({ name, label, error, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>) => {
  return (
    <div className={styles.wrapper}>
      {!!label && (
        <label htmlFor={name} className={styles.label}>
          {label}
        </label>
      )}

      {/* 将ref传递给内部的input元素 */}
      <input 
        id={name} 
        name={name} 
        className={styles.input} 
        ref={ref}
        {...props} 
      />

      {!!error && <p className={styles.error}>{error}</p>}
    </div>
  );
});

// 给forwardRef后的组件加上显示名称，方便调试
Input.displayName = "Input";

关键修改点说明 #

• 用React.forwardRef包裹组件，让它能接收外部传递的ref参数
• 将接收到的ref直接绑定到内部的<input>元素上，这样React Hook Form就能通过ref访问到真实的DOM节点，正常同步输入值
• 添加displayName，避免React调试工具中显示匿名组件，方便后续排查问题

修改完成后，Login.tsx无需任何改动，register方法传递的ref会被正确转发到input元素，输入框的值即可正常更新，控制台的警告也会消失。

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