Узнайте, как проверять пользовательские компоненты ввода с помощью «формы хука реакции».
Ресурсы
Видеоурок: https://youtu.be/-scXzb-F_3k
Стартовый репозиторий Github: https://github.com/Jerga99/next-youtube-course/tree/v1.2
Полный код: https://github.com/Jerga99/next-youtube-course/commit/e31b92302b2878124dee09db32ec26d7535e611a
вступление
В этой части проверки формы мы собираемся проверить компонент даты, реализованный https://www.npmjs.com/package/react-datepicker.
Во-первых, мы добавим в форму поля startDate и endDate. Затем мы заполним их актуальными датами с помощью пакета react-datepicker.
Пожалуйста, инициализируйте свой проект из «Стартового репозитория Github» или проверьте код в «Репозиторий завершенных проектов».
Давайте начнем!
мы начинаем
Я надеюсь, что ваш проект был успешно настроен. Вы можете перейти к файлу components/shared/PortfolioForm.js.
Давайте установим datepicker: npm install — save [email protected]
После установки мы можем импортировать стили в файл _app.js.
import ’react-datepicker/dist/react-datepicker.css’;
Теперь вернитесь к PortfolioForm, импортируйте и предоставьте компонент DatePicker.
Для компонента DatePicker нам нужно предоставить функцию для получения даты в качестве реквизита onChange, а также реквизита selected, чтобы сообщить компоненту, какая дата выбрана в данный момент.
В настоящее время onChange — это просто функция оповещения о дате, а для selected установлено значение null, поэтому мы не можем изменить дату.
Давайте изменим это.
Во-первых, нам нужно зарегистрировать startDate и endDate, чтобы реагировать на форму ловушки. Мы можем сделать это так:
Мы зарегистрируем startDate и endDate с помощью функции register в useEffect, но перед этим установим наблюдатели в Дата начала и Дата окончания.
Каждый раз, когда значения startDate и endDate будут изменяться, компонент будет перерисовываться.
Теперь мы можем предоставить значения компоненту.
Это хорошо, но мы по-прежнему не можем отображать вновь выбранные даты в наших входных данных. В функции onChange нам нужно явно указать дату, чтобы реагировать на форму ловушки. Мы можем сделать это с помощью функции setValue.
Функция handleDateChange выполнит функцию setValue с двумя значениями, dateType, либо "startDate", либо "endDate" ”, и само значение даты.
Теперь мы можем успешно получить дату от компонента при отправке формы!
Давайте поговорим о валидации.
Во-первых, давайте создадим собственный валидатор, который проверяет, существует ли выбранная дата или она была в прошлом. Мы не хотим выбирать будущие дни.
Например, если сегодня 17 января 2020 года, то разрешено только 17 января и все последующие дни.
Вот функция валидатора:
Если у нас нет даты или дата находится в будущем, то дата недействительна. Чтобы указать это, мы возвращаем ложное значение.
Теперь нам нужно предоставить валидатор для регистрации в useEffect.
Теперь, когда форма отправлена, мы можем получить и отобразить ошибки.
Это не все. Мы также хотим, чтобы проверка была активной, поскольку мы меняем даты. В настоящее время мы активируем проверку только тогда, когда нажимаем кнопку отправки.
Давайте изменим handleDateChange.
Каждый раз, когда мы меняем дату, мы проверяем, находится ли дата в будущем. Если выбранная дата находится в будущем, мы установим setError, в любом другом случае вызовем clearError.
Вывод
Ладно, ребята! Это должно быть все из проверки пользовательского компонента. Теперь вы должны настроить проверку любого пользовательского компонента с помощью react-hook-form.
Для получения дополнительной информации посетите: https://academy.eincode.com
Ваше здоровье,
Филип
