为什么 React Hook Form returns 在提交时未定义？

Question

我在打字稿上写下一个项目。我有表单提交后输出 4 个值的表单。但是只有控制器的输入发送一些值，其他的 returns undefined:

{title: undefined, description: undefined, rating: 4, name: undefined} //my console log

我的表单界面：

export interface IReviewForm {
    name: string;
    title: string;
    description: string;
    rating: number;
}

我的表格：

const { register, control, handleSubmit } = useForm<IReviewForm>();

const onSubmit = (data: IReviewForm) => {
    console.log(data);
};

return (
    <form onSubmit={handleSubmit(onSubmit)}>
        <div>
            <Input {...register('name')} />
            <Input {...register('title')} />
            <div>
                <Controller
                    control={control}
                    name='rating'
                    render={({ field }) => (
                        <Rating isEditable rating={field.value} setRating={field.onChange} />
                    )}
                />
            </div>
            <Textarea  {...register('description')} />
            <div>
                <Button>Send</Button> //submit button
            </div>
        </div>
    </form>
);

我的package.json:

"dependencies": {
    "next": "11.0.1",
    "react": "17.0.2",
    "react-hook-form": "^7.3.4",
    ...
},
"devDependencies": {
    "@types/react": "^17.0.3",
    "typescript": "^4.2.3"
    ...
}

P.S.npm i删除node_modules和package-lock后没有帮助

编辑：它适用于正常输入。但是我的输入标签也是正常输入没有孩子：

return (
    <input className={cn(className, styles.input)} {...props} />
);

Answer 1

尝试使用 React.forwardRef 实现您的 Input 组件，如下所示：

const Input = React.forwardRef((props, ref)=> <input className={cn(className, styles.input)} {...props} ref={ref}/>)

考虑到上面的实现只是 JS 实现，我不关心类型，因为你的问题与类型无关。

为什么 React Hook Form returns 在提交时未定义？

Why does React Hook Form returns undefined on submit?

typescript

next.js

react-hook-form