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