Поделиться полями формы в разных формах ⇐ Javascript

[Anonymous]

У меня есть форма для входа и регистрации (из 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