英文:

Using Typescript with React and useForm

问题 {#heading}

以下是您要翻译的内容：

"我正在尝试将一些重复的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}

得分: 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