如何将react-hook-form与自定义组件集成？报错register不是函数

核心问题分析 #

1. 组件参数定义错误：你给组件的第二个参数是解构React上下文，但register是通过props传递的，不需要单独解构上下文参数。
2. 主文件可能未正确初始化useForm：如果主文件里没调用useForm()获取register，那传递给组件的register本身就是undefined。
3. input属性笔误+重复状态绑定：type写成了tyoe，且手动传递value/onChange会和react-hook-form的register冲突。

修正后的代码 #

主文件main.js（必须确保初始化useForm）

import { useForm } from 'react-hook-form';
import MyInputText from './MyInputText';

function MainComponent() {
  // 关键：从useForm获取register方法
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log('表单数据:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <MyInputText 
          title={'Driver Name'} 
          label={'drivername'} 
          register={register} 
          placeholder="请输入司机姓名" 
          type="text" 
        />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default MainComponent;

组件文件MyInputText.js

import React from 'react';

// 直接解构props中的所需属性，无需额外上下文参数
function MyInputText({ title, label, register, placeholder, type = "text" }) {
  return (
    <label className="block">
      <span>{title}</span>
      <input
        {...register(label)}
        className="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
        placeholder={placeholder}
        type={type}
        // 移除手动的value和onChange，由register自动处理表单状态
      />
    </label>
  );
}

export default MyInputText;

关键修复点说明 #

• 组件参数：直接从props中解构register，不要用第二个上下文参数。
• 初始化useForm：主文件必须调用useForm()获取register，否则传递的register是undefined，触发"不是函数"的报错。
• 移除冲突属性：react-hook-form的register会自动绑定输入框的状态和事件，手动传value/onChange会导致受控/非受控组件冲突。
• 修正笔误：把tyoe改成type，确保输入框类型正确渲染。

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