Форма реакции-хука: определение типа регистра

Я использую "react-hook-form": "^7.39.5" и не мог понять, как правильно установить тип регистра.

Index.tsx

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

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

  export default React.memo(Index)

}

FormInput.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 для ввода вместо «любого». Я пробовал несколько вещей, чтобы указать правильный тип, но это не помогло

Шаблоны Angular PrimeNg
Шаблоны Angular PrimeNg
Как привнести проверку типов в наши шаблоны Angular, использующие компоненты библиотеки PrimeNg, и настроить их отображение с помощью встроенной...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
1
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
  );
};

Другие вопросы по теме