为什么 React Hook Form returns 在提交时未定义?
Why does React Hook Form returns undefined on submit?
我在打字稿上写下一个项目。我有表单提交后输出 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} />
);
尝试使用 React.forwardRef
实现您的 Input
组件,如下所示:
const Input = React.forwardRef((props, ref)=> <input className={cn(className, styles.input)} {...props} ref={ref}/>)
考虑到上面的实现只是 JS 实现,我不关心类型,因为你的问题与类型无关。
我在打字稿上写下一个项目。我有表单提交后输出 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} />
);
尝试使用 React.forwardRef
实现您的 Input
组件,如下所示:
const Input = React.forwardRef((props, ref)=> <input className={cn(className, styles.input)} {...props} ref={ref}/>)
考虑到上面的实现只是 JS 实现,我不关心类型,因为你的问题与类型无关。