react-hook-form 中的寄存器是啥类型？

Posted 2023-02-22

【中文标题】react-hook-form 中的寄存器是啥类型？

【英文标题】：What type is register from react-hook-form?react-hook-form 中的寄存器是什么类型？

【发布时间】：2022-01-23 06:23:41

【问题描述】：

在 Typescript 中使用 react-hook-form 时，有一个组件会发送一些 props，register 就是其中之一。

问题在于它在接口中声明时的类型：

export interface MyProps 
  title: string;
  ...
  register: (string | undefined) => void;

在这里声明register的正确方法是什么？

也尝试过：

import  RegisterOptions  from 'react-hook-form';
    export interface MyProps 
      title: string;
      ...
      register: RegisterOptions;
    

【问题讨论】：

您使用的是 react-hook-form 版本 6 还是 7？因为它从一个版本到另一个版本发生了很大变化。

根据 package.json 是"react-hook-form": "^7.15.2",

只需查看文档。类型在页面顶部react-hook-form.com/api/useform/register

@Khorne07 输入它作为答案.. 你可以获得积分

【参考方案1】：

试试这个。

import  RegisterOptions, UseFormRegisterReturn  from 'react-hook-form';

export interface MyProps 
  title: string;
  ...
  register: (name: string, options?: RegisterOptions) => UseFormRegisterReturn;

【参考方案2】：

您可以从UseFormReturn 检索寄存器类型。

import  UseFormReturn  from 'react-hook-form';

export interface MyProps 
  title: string;
  register: UseFormReturn['register'];

在 react-hook-form 中，我们建议转发 ref 而不是传递register 方法。

【参考方案3】：

如果您将 register 作为自定义组件中的道具调用或在 Typescript 中的某些自定义输入字段中使用，则可以使用以下代码。

首先从 'react-hook-form' 导入 UseFormRegister 和 FieldValues

import UseFormRegister, FieldValues  from 'react-hook-form'

之后，定义寄存器的类型为

register: UseFormRegister<FieldValues>

并且繁荣，您不需要使用“任何”类型进行注册。