/
ddistanceOn
/
speechland
Обзор
Документация
Войти
/
ddistanceOn
/
speechland
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
src/components/molecules/InputForm/InputForm.tsx
57 строк
2 KB
Roman Kondrashev
feat: finish init project boilerplate
29 июл 2024, 03:18
29 июл 2024, 03:18
57c6c96
Код
Авторство
О чём код?
import React, { useEffect } from 'react'; import { SubmitHandler, useForm } from 'react-hook-form'; import { useDispatch, useSelector } from 'react-redux'; import { RootState } from '../../../store'; import { setEmail, setName } from '../../../store/slices/userSlice'; import Button from '../../atoms/Button'; import styles from './InputForm.module.css'; interface IFormInput { name: string; email: string; } const InputForm: React.FC = () => { const dispatch = useDispatch(); const userState = useSelector((state: RootState) => state.user); const user = useSelector((state: RootState) => state.user); const { register, handleSubmit, formState: { errors }, } = useForm<IFormInput>(); const onSubmit: SubmitHandler<IFormInput> = (data) => { dispatch(setName(data.name)); dispatch(setEmail(data.email)); }; useEffect(() => { console.log(userState); }, [userState]); return ( <form className={styles.inputForm} onSubmit={handleSubmit(onSubmit)}> <div> <label htmlFor="name">Name:</label> <input id="name" defaultValue={user.name} {...register('name', { required: true })} /> {errors.name && <span>This field is required</span>} </div> <div> <label htmlFor="email">Email:</label> <input id="email" defaultValue={user.email} {...register('email', { required: true })} /> {errors.email && <span>This field is required</span>} </div> <Button label="Submit" onClick={handleSubmit(onSubmit)} /> </form> ); }; export default InputForm;