У меня есть форма для входа и регистрации (из React Hooks) в моем приложении. Я хочу повторно использовать общие поля для обеих форм. и в emailfield.tsx я определил < /p>
interface EmailFieldParameterTypes {
register: UseFormRegister;
errors: FieldErrors;
}
, где я надеюсь позвонить по электронной почте, оба с использованием регистрации и user formregister Но я не был. Компилятор TypeScript дал < /p>
Type 'UseFormRegister' is not assignable to type 'UseFormRegister'.
Type 'LoginFormFields' is missing the following properties from type 'RegisterFormFields': username, firstname, surnamets(2322)
emailField.tsx(5, 5): The expected type comes from property 'register' which is declared here on type 'IntrinsicAttributes & EmailFieldParameterTypes'
< /code>
Ошибка, хотя Registerformfields Extends LoginFormFields. Я также пробовал что -то с дженерами, но это не тренировалось. Оценивается для любой справки.import { FieldErrors, UseFormRegister } from 'react-hook-form';
import { LoginFormFields } from '../../login/loginForm';
interface EmailFieldParameterTypes {
register: UseFormRegister;
errors: FieldErrors;
}
const EmailField = ({ register, errors }: EmailFieldParameterTypes) => {
return (
Email
{errors.email &&
{errors.email.message}
}
);
};
export default EmailField;
< /code>
registerform.tsx
import { useForm } from "react-hook-form";
import EmailField from "../components/form-fields/emailField";
import PasswordField from "../components/form-fields/passwordField";
import UsernameField from "../components/form-fields/usernameField";
import { LoginFormFields } from "../login/loginForm";
export interface RegisterFormFields extends LoginFormFields {
username: string
firstname: string
surname: string
}
const RegisterForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
const onSubmit = handleSubmit((data) => console.log(data))
return (
Giriş Yap
)
};
export default RegisterForm;
< /code>
loginform.tsx
import { useForm } from "react-hook-form";
import EmailField from "../components/form-fields/emailField";
import PasswordField from "../components/form-fields/passwordField";
export interface LoginFormFields {
email: string
password: string
}
const LoginForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm()
const onSubmit = handleSubmit((data) => console.log(data))
return (
Giriş Yap
)
};
export default LoginForm;
Подробнее здесь: https://stackoverflow.com/questions/793 ... rent-forms
