Возвращение изменений из функциональных компонентов

Рейтинг: 0Ответов: 1Опубликовано: 08.03.2023

Мне нужно, чтобы изменения из Функционального компонента возвращались в 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
}

Я пытался вернуть значения, описывая функцию в типах, но я так и не понял как это сделать.

Ответы

▲ 0Принят
  1. никакая функция не передается, для исправления нужно передать сеттер

    <FormItem required={true} label="Login" input={userLoginEmail} type="text" placeholder="Lite Solid Core" handleChange={setUserLoginEmail}/>
    
  2. функция не вызывается при изменении

    onChange={(e) => handleChange(e.target.value)} 
    
  3. тип функции можно изменить так, чтобы параметром была строка

    handleChange: (value: string) => void