В последнее время я потратил много времени на рефакторинг проекта, основанного на Formik. Помимо обновления всей этой старой функциональности React, я также получил удовольствие от всех хороших вещей, которые поставляются с Formik 2.
Если вы имеете дело с формами (большими или маленькими) и цените свое драгоценное время жизни, я настоятельно рекомендую проверить эту библиотеку.
Чем хорош Формик?
Короче говоря, если вы еще не работали с Formik, он снимет с ваших рук следующие утомительные задачи:
- Управление состоянием при взаимодействии с компонентами формы
- Вложенные формы
- Жизненный цикл отправки
- Обработка ошибок и проверка
- Зависимые поля
Не прикасаясь к Formik за два года, я еще раз осознал, что это действительно отличная библиотека для управления формами в React без обычной головной боли. Если вы еще не читали о Formik, я настоятельно рекомендую вам пойти сюда и посмотреть вступление.
Этот не очень простой пример машинописного текста Formik
Чтобы узнать, как настроить Formik, я предлагаю вам ознакомиться с их документацией. Вместо этого я сразу перейду к более полному примеру, который полностью типизирован и использует поле даты вместо обычного ввода текста:
Это лучший пример «Hello World», который показывает, как Formik подключается к вашему состоянию, просто идентифицируя поля вашей формы.
Вдобавок к этому функция onSubmit имитирует отправку асинхронной формы, и вы можете видеть, насколько хорошо Formik предлагает встроенную поддержку для этого. Это даст нам красивый интерфейс:
Если вы запустите этот пример, вы увидите, как все хорошо организовано без необходимости писать обработчики повсюду. Все идет нормально.
Как стилизовать эти поля?
Сейчас у этой формы нет особого дизайна. Конечно, вы всегда можете настроить таргетинг на эти поля с помощью некоторого глобального CSS, но Formik на самом деле предлагает вам простой способ стилизовать ваши собственные поля.
Используя компонент Field сверху, вы можете просто добавить компонент в качестве опоры:
Я не дизайнер, но я справлюсь со своей задачей:
Какое удовлетворение! Теперь у нас есть централизованные стили ввода, автоматическая обработка состояния и что-то похожее на настоящую форму.
А как насчет вложенных форм Formik?
Я слышу тебя. На самом деле формы редко строятся как один компонент, а скорее разбиваются на множество по мере роста сложности.
К счастью, Formik и здесь не разочаровывает и предлагает вам три способа интеграции вложенных форм:
- Использование соглашений об именах полей в соответствии с формой вашего штата
- Передача сеттера в качестве опоры
useFormikContext()- Я перейду к этому в следующем разделе
Давайте посмотрим на первый:
Легко, да? Все, что нам нужно было сделать, это назвать наше поле после пути атрибута в нашем состоянии, и Formik автоматически отобразит это поле!
Если вы хотите, чтобы компоненты формы оставались автономными или используете внешние библиотеки, вы можете попробовать обработчики Formik:
Использование setFieldValue из вашего Formik props дает вам простой и понятный способ работы с инкапсулированными компонентами.
Вот что у нас получилось:
Полная гибкость с использованием useFormikContext
Вы можете столкнуться с ситуацией, когда одна из ваших подформ становится настолько сложной, что вам потребуется дополнительная степень гибкости. Вот где useFormikContext вступает в игру.
По сути, это весь экземпляр Formik, взятый прямо из контекста React. Вот простой редактор тегов, который живет сам по себе внутри нашей формы и даже может быть настроен с помощью отдельного ключа:
Вот и наша маленькая вольная птичка:
Очевидно, вы можете пойти дальше по этому пути, поскольку useFormikContext() разблокирует для вас все методы и помощники жизненного цикла.
Массивы полей
И последнее, что я хочу сказать о формах: списки. Сохранение массивов элементов формы организованными и синхронизированными может легко превратиться в ситуацию с младенцем до свидания (видите, что я там делал?).
Я не буду публиковать здесь пример массивов полей, поскольку эта функциональность на самом деле очень хорошо освещена в документации Formik. Я очень рекомендую это проверить, это облегчило мне жизнь.
Привет, я Фридрих! Я менеджер и разработчик на работе, шеф-повар, музыкант, энтузиаст данных и языков дома. Вы можете найти меня в LinkedIn.
