Возвращение изменений из функциональных компонентов
Мне нужно, чтобы изменения из Функционального компонента возвращались в userLoginEmail и userPassword.
Форма
import React, { useState } from "react";
import FormItem from "./FormItem";
export default function FormAuth(){
const formTitle = "Authorization";
const [userLoginEmail,setUserLoginEmail] = useState("");
const [userPassword,setUserPassword] = useState("");
const [showPassword,setShowPassword] = useState(false);
const [formStatus,setFormStatus] = useState(false);
return(
<form className="form form-general form-auth">
<div className="form__header"><h1 className="title form_title">{formTitle}</h1></div>
<div className="form__body">
<div className="form__body-inputs">
<FormItem required={true} label="Login" input={userLoginEmail} type="text" placeholder="Lite Solid Core" />
<FormItem required={true} label="Password" input={userPassword} type="text" placeholder="It`s Time To Game!" />
</div>
<div className="form__body-information">
<p><span className="span magic">Если забыли Login / Password или всё сразу?</span></p>
<p><span className="span magic">Перейдите в Reset Account</span></p>
</div>
<div className="form__body-buttons">
</div></div>
</form>
)
}
Компонент формы [Input]
import React from "react";
import {FormItemProps} from "../../types/types";
export default function FormItem({label,input,type,placeholder,pattern,handleChange}:FormItemProps){
console.log(input);
return(
<div className="form__body-inputs__item">
<label className="label label-form">{label}</label>
<input
onChange={() => handleChange}
type={type}
placeholder={placeholder}
pattern={pattern ? pattern : undefined}
className="input input-form"
value={input}>
</input>
</div>
)
}
Типы [Input]
export interface FormItemProps {
label: string;
input: any;
type: string;
placeholder?: string;
pattern?: string;
required?: boolean;
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}
Я пытался вернуть значения, описывая функцию в типах, но я так и не понял как это сделать.
Источник: Stack Overflow на русском