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

Question

[dima89e]

Нужно как-то отследить чтобы если например 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

Comments

[Александр]

А зачем это нужно?

[dima89e]

Александр, что значит зачем? нужно отследить событие select, а пока что я хочу по простому через useeffect хотя бы что-то с этим сделать

[Александр]

dima89e, Ну вот в useEffect это делать плохо, вот 100%. На onChange - пожалуйста.

[dima89e]

Александр, там мне надо 3 select изменения отследить и судь вопроса не в этом была

[dima89e]

Александр, а вообще нужно чтоб daysCountInMonth менялся при изменении year и month в birthdateinput

// page.tsx
'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


// BirthDateInput.tsx
'use client'

import { MenuItem } from '@mui/material'
import React, { useMemo } from 'react'
import SelectRoot from '@/shared/components/ui/SelectRoot'
import ErrorText from './ErrorText'
import { BIRTHDATEMONTHES } from '@/shared/constants/forms.constants'
import { formatDaysArr } from '@/shared/lib/format-days-arr'
import { formatYearsArr } from '@/shared/lib/format-years-arr'

export interface IBirthDateInputValues {
	day: string
	month: string
	year: string
}

interface IBirthDateInputProps {
	errors: {
		day?: { message?: string }
		month?: { message?: string }
		year?: { message?: string }
	}
	register: any
	control: any
	values?: IBirthDateInputValues
	setValues?: (values: IBirthDateInputValues) => void
}

const BirthDateInput: React.FC<IBirthDateInputProps> = ({
	errors,
	register,
	values = {
		day: '',
		month: '',
		year: ''
	}
}) => {
	const { day, month, year } = values

	const daysCountInMonth = useMemo(() => {
		console.log('FORMATDASYARR ', values)
		return formatDaysArr(Number(year), Number(month))
	}, [month, values, year])

	return (
		<div className='flex flex-col'>
			<div className='flex'>
				<SelectRoot
					placeholder='День'
					defaultValue={day}
					error={!!errors?.day}
					{...register('birthdate.day')}
				>
					{[...Array(daysCountInMonth)].map((_, index) => (
						<MenuItem
							key={index}
							value={(index + 1).toString()}
						>
							{index + 1}
						</MenuItem>
					))}
				</SelectRoot>

				<SelectRoot
					fullWidth
					placeholder='Месяц'
					defaultValue={month}
					{...register('birthdate.month')}
					error={!!errors?.month}
				>
					{BIRTHDATEMONTHES.map((item, index) => (
						<MenuItem
							key={item}
							value={(index + 1).toString()}
						>
							{item}
						</MenuItem>
					))}
				</SelectRoot>

				<SelectRoot
					placeholder='Год'
					defaultValue={year}
					{...register('birthdate.year')}
					error={!!errors?.year}
				>
					{formatYearsArr().map(item => (
						<MenuItem
							key={item}
							value={item.toString()}
						>
							{item}
						</MenuItem>
					))}
				</SelectRoot>
			</div>

			{(errors?.day || errors?.month || errors?.year) && (
				<ErrorText>
					{errors?.day?.message ||
						errors?.month?.message ||
						errors?.year?.message ||
						'Заполните все поля даты рождения'}
				</ErrorText>
			)}
		</div>
	)
}

export default BirthDateInput

[szQocks]

dima89e, в react-hooks-form есть watch, попробуй с его помощь

const birthdate = useMemo(() => watch('birthdate'), [ watch ]);

  useEffect(() => {

  }, [ birthdate, emailValue ]);

написал но не проверял, попробуй

[dima89e]

szQocks, спасибо большое, сработало!