typescript 如何在react-hook-form 7的寄存器中传递变量

qlvxas9a 于 2022-12-19 发布在 TypeScript

关注(0)|答案(2)|浏览(123)

从v7开始，react-hook-forms就不再使用refs了，我一直在尝试让我的表单动态化，从json文件中获取字段属性，但是useForm的注册表每次都给我一个类型问题。

const {register , and so on..}= useForm({defaultvalues : {A:a,B:b, and so on..}})
...
{fields.map(f,i)=>
<TextField id={f.id} ..and so on.. 
{...register(`${f.id}` as const)} //error
/>}

错误为：

type string is not assignable to parameter of type '"A"|"B"| and so on'. ts2345

f.id 返回的值与他们在那里想要的值相同，但我无法解决这个问题。

typescript

来源：https://stackoverflow.com/questions/69923206/how-to-pass-variable-in-register-of-react-hook-form-7

2条答案

按热度按时间

sycxhyv71#

我遇到了同样的问题。试着为你的寄存器名建立和你的对象一样的结构。例如，如果你有这个对象：

{
   "car":[
      {
         "seat0":"color"
      },
      {
         "seat1":"color"
      }
   ]
}

然后如果你想绘制这个图，建立你的表，就像这样做。

{ data.map((item, index) => { 
              return (<TextField id={index} ..and so on.. 
              {...register(`car.seat${index}.color`)} />);
          }) }

赞(0）回复(0）举报 2022-12-19

qyswt5oh2#

您可以使用react-hook-form提供的类型来代替as const。

在“React-钩形”之前：“^7.41.0”

const name = `car.seat${index}.color`;

// omitted the other parts
{...register(name as Path<FormInputs>)}

从“React-钩形”开始：“^7.41.0”

const name = `car.seat${index}.color`;

// omitted the other parts
{...register(name as Path<UnPackAsyncDefaultValues<FormInputs>>)}

当然，register 函数类型具有您为表单定义的泛型类型UseFormRegister<FormInputs>，例如：

type FormInputs = {
  email: string;
  password: string;
};

赞(0）回复(0）举报 2022-12-19

我来回答

typescript 如何在react-hook-form 7的寄存器中传递变量

2条答案

相关问题

热门标签

最新问答