javascript - <input> 内的 ref={register} 给了我一个 path.split 错误

Question

嗨，我正在尝试用 React 制作一个表格，当我放ref={register}里面

<input className="form-control" ref={register} type="text" name="text" id="text" />

我收到以下错误:

TypeError: path.split is not a function
get
src/utils/get.ts:6

有什么建议么？我关注 this guy's优酷教程:
这是我的 return () 语句上面的代码:

 export const CreateTodo = () => {
        const { register, handleSubmit} = useForm(); 
    
        const onSubmit = handleSubmit((data) => {
            alert(JSON.stringify(data));
        });

return ( ... );
}

CodeSandbox link:

Answer 1

react-hook-form v7.0.0(您正在使用的版本)中注册输入的方式已更改。
来自 docs ,

register method is no longer occurred at ref, instead invoke the function itself and spread the props into the input. The function itself will return the following props: onChange, onBlur, name and ref.

- <input ref={register({ required: true })} name="test" />
+ <input {...register('name', { required: true })} /> 
+ <TextInput {...register('name', { required: true })} />

<input
  className="form-control"
  {...register('text')}
  type="text"
/>