为什么 React Hook Form 在提交时返回 undefined？答案

【问题标题】：Why does React Hook Form returns undefined on submit?为什么 React Hook Form 在提交时返回 undefined？
【发布时间】：2022-01-04 12:44:23
【问题描述】：

我在打字稿上写下一个项目。我有表单提交后输出4个值。但是只有带控制器的输入发送一些值，其他返回未定义：

{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 后没有帮助

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

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

【问题讨论】：

标签： typescript next.js react-hook-form

【解决方案1】：

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

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

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

【讨论】：