英文:
Using Typescript with React and useForm
问题
以下是您要翻译的内容：
"我正在尝试将一些重复的React表单代码提取出来。我打算为从函数Field返回的输入添加一个标签，可能还有一些其他小工具。我一直在尝试为name参数使用正确的类型，但没有找到适合的类型。
以下是当前出现的错误：
类型“string”的参数不能赋给类型“'name' | 'details'”。ts(2345)
(parameter) name: string
我尝试重新定义了错误中列出的字符串联合，但它也不匹配。我说“重新发明轮子”，因为这个表单最终会有很多字段，我宁愿只列出它们一次。
以下是我的代码：
import { useForm } from 'react-hook-form';function MyForm () {const { handleSubmit, register } = useForm<FormValues>();const onSubmit = handleSubmit((data: FormValues) => {console.log({data});});function Field({name}: {name: string}) {console.log({name})return (<><input {...register(name)} /></>);}return (<form onSubmit={onSubmit}><Field name={"name"} /><input {...register("name")} placeholder="name" /><input {...register("details")} placeholder="details" /><input type="submit" /></form>);}type FormValues = {name: string;details: string;}export default MyForm;
我尝试定义错误中列出的字符串联合，但它也不匹配。我还尝试在函数外部注册字段名称，并将其结果传递给函数。"
英文:
I am trying to factor out some repetitive code for a React form. I intend to add a label to the input returned from function Field and perhaps a few other doodads. I have been trying to use a proper type for the name parameter, but have not found one that works.
Here is the current error I get:
Argument of type 'string' is not assignable to parameter of type '"name" | "details"'.ts(2345)
(parameter) name: string
I have tried reinventing the wheel by defining the string union listed in the error, but that doesn't match either. I say "reinventing the wheel" because this form will eventually have many fields, and I'd rather list them only once.
Here is my code:
import { useForm } from 'react-hook-form';function MyForm () {const { handleSubmit, register } = useForm<FormValues>();const onSubmit = handleSubmit ((data: FormValues) => {console.log({data});});function Field({name}: {name: string}) {console.log({name})return (<><input {...register(name)} /></>);}return (<form onSubmit={onSubmit}><Field name={"name"} /><input {...register("name")} placeholder="name" /><input {...register("details")} placeholder="details" /><input type="submit" /></form>);}type FormValues = {name: string;details: string;}export default MyForm;
I have tried defining the string union listed in the error, but that doesn't match either. I also tried registering the field name outside of the function and passing its result into the function.
答案1
得分: 1
import { useForm, FieldPath } from "react-hook-form";function Field({ name }: { name: FieldPath<FormValues> }) {return <input {...register(name)} />;}
英文:
You can utilize FieldPath generic from react-hook-form, to type the Field function.
import { useForm, FieldPath } from "react-hook-form";function Field({ name }: { name: FieldPath<FormValues> }) {return <input {...register(name)} />;}
and then this won't throw an error anymore:
<Field name="name" />
working example in codesandbox
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论