@dima89e

React hook form как отследить изменения?

Нужно как-то отследить чтобы если например select или input изменился getvalues как-то перендеривался и срабатывал useffect

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import {
	Button,
	FormControl,
	FormControlLabel,
	FormLabel,
	InputLabel,
	Radio,
	RadioGroup
} from '@mui/material'
import { useEffect, useState } from 'react'
import { SubmitHandler, useForm } from 'react-hook-form'
import BirthDateInput from '@/shared/components/ui/BirthDateInput'
import EmailInput from '@/shared/components/ui/EmailInput'
import PasswordInput from '@/shared/components/ui/PasswordInput'
import StrokeInput from '@/shared/components/ui/StrokeInput'
import TelInput from '@/shared/components/ui/TelInput'
import { EMAILDOMAINS } from '@/shared/constants/forms.constants'
import { registerSchema } from '@/shared/schemas/register.schema'
import { IRegisterForm } from '@/shared/types/auth.types'

const RegisterPage = () => {
	const {
		register,
		handleSubmit,
		reset,
		setValue,
		control,
		setError,
		getValues,
		formState: { errors }
	} = useForm<IRegisterForm>({
		resolver: zodResolver(registerSchema)
	})

	useEffect(() => {
		console.log('changed value ', getValues('birthdate'))
	}, [
		getValues,
		getValues('birthdate'),
		getValues('birthdate')?.year,
		getValues('birthdate')?.month,
		getValues('birthdate')?.day
	]) // не отслеивается изменение

	const [emailValue, setEmailValue] = useState('')

	const onSubmit: SubmitHandler<IRegisterForm> = (data, e) => {
		e?.preventDefault()
		console.log('submit ', data)
	}

	return (
		<div className='max-w-[600px] mx-auto shadow-normal p-5 mt-10 mb-10'>
			<form onSubmit={handleSubmit(onSubmit)}>
				<h2 className='text-center text-2xl font-bold mb-10'>
					Создание почтового ящика
				</h2>

				<div className='flex flex-col gap-4'>
					<div className='flex gap-4'>
						<StrokeInput
							label='Имя'
							error={!!errors.name}
							helperText={errors.name?.message}
							{...register('name')}
						/>
						<StrokeInput
							label='Фамилия'
							error={!!errors.lastName}
							helperText={errors.lastName?.message}
							{...register('lastName')}
						/>
					</div>

					<div>
						<InputLabel>Дата рождения</InputLabel>
						<BirthDateInput
							errors={{
								day: errors.birthdate?.day,
								month: errors.birthdate?.month,
								year: errors.birthdate?.year
							}}
							register={register}
							control={control}
						/>
					</div>

					<FormControl>
						<FormLabel id='demo-row-radio-buttons-group-label'>Пол</FormLabel>
						<RadioGroup
							row
							aria-labelledby='demo-row-radio-buttons-group-label'
							name='row-radio-buttons-group'
						>
							<FormControlLabel
								value='female'
								control={<Radio />}
								label='Мужской'
							/>
							<FormControlLabel
								value='male'
								control={<Radio />}
								label='Женский'
							/>
						</RadioGroup>
					</FormControl>

					<div>
						<InputLabel>Имя ящика</InputLabel>
						<EmailInput
							inputType='register'
							domains={EMAILDOMAINS.domains}
							defaultDomainValue={EMAILDOMAINS.defaultValue}
							value={emailValue}
							setValue={setEmailValue}
						/>
					</div>

					<div>
						<InputLabel>Номер телефона</InputLabel>
						<TelInput />
					</div>

					<div>
						<InputLabel>Пароль</InputLabel>
						<PasswordInput />
					</div>

					<Button
						type='submit'
						variant='contained'
						sx={{ mt: 3 }}
					>
						Создать
					</Button>
				</div>
			</form>
		</div>
	)
}
export default RegisterPage
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы