React Hook Form

Question 1

Установите библиотеку для работы с формами React Hook Form:

Answer 1

pnpm add react-hook-form
Документация: https://react-hook-form.com/

1. useForm - хук для удобного управления формами, принимающий объект настроек в качестве необязательного аргумента.
   Документация: https://react-hook-form.com/docs/useform

export const Login = () => {
/…/

const {
register,
handleSubmit,
reset,
control,
formState: { errors },
} = useForm<LoginInputs>({ defaultValues: { email: '', password: '', rememberMe: false } })</LoginInputs>

/…/
}

type LoginInputs = {
email: string
password: string
rememberMe: boolean
}

2. Register fields - ключевой концепт в React Hook Form
   Регистрация поля в хуке посредством уникального имени-ключа, что делает его значение доступным для валидации и отправки формы.
   Чтобы хук мог контролировать данные элемента, необходимо в каждый input добавить {…register(‘имяКлюча’)}
   Документация: https://react-hook-form.com/docs/useform/register

export const Login = () => {
/…/

return (
<Grid container justifyContent={‘center’}>
<FormControl>
{/*...*/}
<FormGroup>
<TextField label="Email" margin="normal" {...register('email')} />
<TextField type="password" label="Password" margin="normal" {...register('password')} />
<FormControlLabel
label="Remember me"
control={<Checkbox {...register('rememberMe')} />}
/>
{/*...*/}
</FormGroup>
</FormControl>
</Grid>
)
}

3. handleSubmit - эта функция получит данные формы при submit, если валидация полей пройдет успешно.
   Документация: https://react-hook-form.com/docs/useform/handlesubmit

export const Login = () => {
/…/
const onSubmit: SubmitHandler<LoginInputs> = data => {
console.log(data)
}</LoginInputs>

return (
<Grid container justifyContent={‘center’}>
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl>{/*...*/}</FormControl>
</form>
</Grid>
)
}

4. Валидация
   Валидировать поля формы можно с помощью переданного вторым параметром объекта с критериями валидации в функцию register.
   Документация: https://react-hook-form.com/get-started#Applyvalidation

import styles from ‘./Login.module.css’

export const Login = () => {
/…/

return (
<Grid container justifyContent={‘center’}>
<form onSubmit={handleSubmit(onSubmit)}>
<FormControl>
{/*...*/}
<FormGroup>
<TextField
label="Email"
margin="normal"
error={!!errors.email}
{...register('email', {
required: 'Email is required',
pattern: {
value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
message: 'Incorrect email address',
},
})}
/>
{errors.email && <span className={styles.errorMessage}>{errors.email.message}</span>}
{/*...*/}
</FormGroup>
</FormControl>
</form>
</Grid>
)
}

5. Reset form Для очистки формы после успешного выполнения onSubmit в callback onSubmit добавьте вызов функции reset из хука useForm.
   Документация: https://react-hook-form.com/docs/useform/reset

const onSubmit: SubmitHandler<LoginInputs> = data => {
console.log(data)
reset()
}</LoginInputs>

6.Controller - Поля email и password зачищаются после сабмита, а rememberMe нет, потому что компонент Checkbox из MUI не передает ref в нативный элемент.
Для интеграции с UI библиотеками, когда компонент не передает ref в нативный элемент, используется компонент Controller, который берет на себя процесс регистрации:
- Оберните Checkbox специальным компонентом Controller;
- Добавьте свойство checked со значением предоставляемого value;
- Уберите register во избежание повторной регистрации Checkbox:

<FormControlLabel
label={‘Remember me’}
control={
<Controller
name={‘rememberMe’}
control={control}
render={({ field: { value, …rest } }) => <Checkbox {…rest} checked={value} />}
/>
}
/>