React-hook-form：寄存器类型定义

Question

我正在使用"react-hook-form": "^7.39.5"但无法弄清楚如何正确设置寄存器类型。

索引.tsx

const Index = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    getValues,
    setValue,
  } = useForm<FormInputs>({
    resolver: yupResolver(formSchema),
  })
  const onSubmit = (data: FormInputs) => console.log(data)

  return(
  <FormInput
    label={label}
    register={{ ...register('firstName') }}
    errorMessage={errors['firstName']?.message}
   />
  )

  export default React.memo(Index)

}

表单输入.tsx

type FormInputProps = {
  label: string
  register: any // <-- I NEED THIS TO BE TYPED
  errorMessage?: string
  type?: string
}

const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={errorMessage && errorMessage?.length > 0}
      />
    </FormLayout>
  )
}

export default React.memo(FormInput)

我需要从 FormInputProps 注册为通过键入而不是“任何”。我尝试了几种方法来给出正确的类型，但它并没有帮助

Answer 1

react-hook-form您可以使用被调用的内置类型UseFormRegisterReturn，我在代码中看到的另一点是useForm这样使用的：

useForm<FormInputs>({
    resolver: yupResolver(formSchema),
  })

您需要将表单值的类型作为通用输入传递，这取决于您的表单值可能类似于：

type FieldValues = {
  firstName: string;
  //... other values
};

该解决方案的总体情况如下：

import { useForm, UseFormRegisterReturn } from "react-hook-form";

type FieldValues = {
  firstName: string;
  //... other values
};

export default function App() {
  const {
    register,
    formState: { errors }
  } = useForm<FieldValues>();

  return (
    <FormInput
      label={"label"}
      register={{ ...register("firstName") }}
      errorMessage={errors["firstName"]?.message}
    />
  );
}

type FormInputProps = {
  label: string;
  register: UseFormRegisterReturn;
  errorMessage?: string;
  type?: string;
};

const FormInput = ({ label, register, errorMessage, type }: FormInputProps) => {
  return (
    <FormLayout errorMessage={errorMessage}>
      <TextField
        label={label}
        {...register}
        fullWidth
        size="small"
        type={type ?? undefined}
        error={errorMessage && errorMessage?.length > 0}
      />
    </FormLayout>
  );
};