React: Хук для управления состоянием формы в React
Этот кастомный хук может быть использован для управления состоянием любого поля ввода.
import { useState, useCallback } from 'react'; # кастомный хук useForm обрабатывает обновления состояния формы и валидацию function useForm( initialValues, validate ) { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState({}); const handleChange = useCallback((event) => { const { name, value } = event.target; setValues({ ...values, [name]: value, }); if( validate ) { setErrors(validate(values)); } }, [values, validate] ); const handleSubmit = useCallback((event) => { event.preventDefault(); if( validate ) { const errors = validate(values); setErrors(errors); if( Object.keys(errors).length === 0 ) { console.log('Форма отправлена'); } } }, [values, validate] ); return { values, handleChange, handleSubmit, errors }; } export default useForm;
Пример использования этого хука:
import React from 'react'; import useForm from './useForm'; function validate( values ) { const errors = {}; if( !values.email ) { errors.email = 'Email is required'; } else if( !/\S+@\S+\.\S+/.test(values.email) ) { errors.email = 'Адрес электронной почты недействителе'; } if( !values.password ) { errors.password = 'Необходим пароль'; } else if( values.password.length < 6 ) { errors.password = 'Пароль должен состоять из 6 символов или более'; } return errors; } function Signup() { const { handleChange, handleSubmit, values, errors } = useForm( { email: '', password: '' }, validate ); return ( <form onSubmit={handleSubmit}> <input type="email" name="email" onChange={handleChange} value={values.email} /> {errors.email && <p>{errors.email}</p>} <input type="password" name="password" onChange={handleChange} value={values.password} /> {errors.password && <p>{errors.password}</p>} <button type="submit">Sign up</button> </form> ); } export default Signup;
Комментарии