Библиотека проверки формы React, построенная до 5 КБ
📋 Настраиваемый хук React для проверки формы без лишних хлопот
TL; DR: представляем новую библиотеку React Hook для более простого и понятного подхода к проверке формы (IMHO).
В последние годы я имел дело с формами, будь то отправка одной формы или многоэтапная воронка.
Недавно React 16.8 предоставил нам Hook, который, на мой взгляд, является одной из величайших возможностей, предоставленных командой React🌹 (Спасибо). Таким образом, я обнаружил новый подход к написанию проверки формы, потенциально более чистый подход. позвольте мне показать вам код 🔎
Как видно из приведенного выше примера, Компонент не был импортирован. Таким образом, вместо контролируемого ввода / выбора над формой, этот подход использует неконтролируемый ввод формы и регистрацию их ref в форме ловушки React. Это позволяет хуку иметь полный контроль и понимание ваших элементов формы, и, следовательно, это дает много других преимуществ:
- Не требуется внешних компонентов для переноса входных данных, что значительно уменьшило размер библиотеки обработчиков (5kb gzip).
- Поскольку это неконтролируемое, вам больше не нужно иметь onChange и устанавливать значение для ввода, начните использовать существующую разметку HTML.
- Если ссылка компонента зарегистрирована в хуке, вы можете легко получить доступ к ее ссылке при возникновении ошибки и привязке к определенному полю.
- Гораздо более простой API, потому что проверка происходит на уровне регистрации.
- Отлично подходит для производительности, так как изменение ввода больше не вызывает повторного рендеринга, посмотрите сравнение производительности здесь.
- Легкий доступ к состоянию формы, так как Hook хранит ссылки для каждого ввода. вы можете легко запросить их ценность.
- Поддержка встроенной проверки браузера ❤️.
Это мои краткие сведения о преимуществах использования React Hook Form, я думаю, что с таким подходом все намного проще (IMHO). Пожалуйста, посетите веб-сайт для живой демонстрации, я также создал конструктор форм, который позволяет вам создавать формы и копировать / вставлять код в вашу среду или codeSandbox для их тестирования. Многие примеры также живут на странице Github.
Я очень надеюсь, что это упростит проверку формы, и не стесняйтесь оставлять меня с проблемой или предложением на Github (пожалуйста, оставьте звездочку, если вы сочтете это полезным 🙏🏻). ❤️ Спасибо за чтение.