Некоторое время назад я опубликовал блог о некоторых уроках, извлеченных из перехода на React и Redux. Я уже довольно давно использую React и Friends и хотел поделиться, что было одной из наших самых больших проблем и как мы их преодолели - реализацией форм.

многие веб-приложения основаны на формах, вы даете пользователю возможность использовать вашу платформу, заполняя формы и манипулируя их компонентами. Это, очевидно, поднимает некоторые вопросы относительно того, как писать и использовать компоненты формы в реакции, и как реагировать и сокращать вместе, и многое другое, например:

# Как ведет себя компонент?
# Где хранить свои данные?
# Как выполнять проверки?
# Как определить состояние и изменения формы?

В Bizzabo многие страницы в нашем сервисе основаны на формах, это было некоторое время, поэтому мы знаем о проблемах и уже обращались к перечисленным выше вопросам, когда использовали Backbone.js, но эй, React - это другая игровая площадка, и нам нужно было, с одной стороны, сделать так, чтобы пользователь мог легко заполнять форму, независимо от того, использует ли он наши базовые формы или наши формы React, но в то же время полностью переделать весь способ использования форм и полностью ответить на эти вопросы опять таки.

прежде чем мы начнем отвечать на вопросы, позвольте мне начать с конца, мы использовали redux-form - библиотеку управления состоянием формы поверх redux, созданную Erik Rasmussen, хорошо поддерживаемой библиотекой, которая меняется и развивается еженедельно. основание.

# Как работает мой компонент?

Каждый компонент формы в нашей системе должен иметь поведение пользовательского интерфейса. Возьмем, к примеру, ввод, он имеет много состояний: действителен, затронут, сфокусирован, грязный и многие другие состояния. для каждого состояния вы хотите иметь визуальное представление этого состояния. отображение ошибок, предупреждений и т. д. Для этого мы выбрали решение Redux-form, которое предоставляет метаинформацию о состоянии вашего компонента. Как использовать компонент формы redux? Компонент ‹Field /› - это то, как вы подключаете каждый отдельный вход к хранилищу Redux (я подробно остановлюсь на этом вопросе в моем следующем пункте)

Единственное, что вам нужно сделать, чтобы активировать его, это обернуть ваш компонент компонентом ‹Field /›, как показано выше, дать ему имя, ваш компонент, а затем вы можете отображать состояния пользовательского интерфейса по своему усмотрению. Есть несколько способов сгенерировать сокращенную форму ‹Поле /›, вы можете проверить документацию.

Итак, теперь вы можете добавить свой пользовательский интерфейс для каждого состояния по своему желанию.

Как вы видите выше, когда вы используете ‹Field /›, вы получаете бесплатные состояния пользовательского интерфейса, поэтому я могу отображать другое уведомление в зависимости от другого состояния.

# Где хранить свои данные?

Один из наших основных вопросов, на который мы должны были ответить, был где хранить данные. Позвольте мне пояснить, на что нам нужно было ответить:
Каждый элемент формы должен иметь начальное значение, это может быть пустым, если ваша форма работает в «новом» состоянии, или иметь какое-то значение для состояния «редактировать». При любом изменении \ blur \ keyUp (или любом другом интересующем вас событии) вы хотите, чтобы значение обновлялось. Так где мне его хранить?

Решение Redux-form - редуктор Redux, который прослушивает отправленные действия redux-form для поддержания состояния вашей формы в Redux. Ваши формы будут смонтированы в ключевом имени «form», и каждая форма будет иметь уникальное имя, и доступ к нему так же прост, как form [name].

ниже вы можете увидеть, насколько легко его настроить.

redux-form предоставляет селекторы для начальных и текущих значений. Самое замечательное в его использовании заключается в том, что это просто сокращение, вы можете прослушивать конкретное настраиваемое действие и соответствующим образом манипулировать своими данными не только для действий с сокращенной формой, но и для ваших конкретных действий. Просто используйте для этого плагин.

Итак, до сих пор мы говорили об отображении текущего состояния компонента и о том, где мы управляем данными.

Но как насчет обработки самих данных?

# Как проводить проверки?

Одна из основных проблем, с которой сталкивается каждая форма, - это проверка. Когда пользовательский ввод отправляется (в любом другом событии браузера, если на то пошло), недостаточно просто обновить компонент формы с новым значением, вам необходимо проверить значение. В этом выпуске нам пришлось задать себе следующие вопросы:
Сохраняю ли я значение компонента формы в состоянии, и после прохождения проверки я отправляю его в магазин? или я выполняю всю проверку данных в магазине?

Форма Redux ответила на все это для нас, поскольку проверки являются частью экосистемы библиотеки. Вы можете передать свою форму, которую вы создали, используя сокращенную форму, метод проверки, или даже выполнить проверку в определенном ‹Поле /› (из определенной версии). У него есть только 1 ограничение и его структура объекта ошибки, а именно: {field1: ‹String›, field2: ‹String›}. Вы можете реализовать метод проверки самостоятельно или использовать стороннюю библиотеку. мы выбрали последний и использовали validator.js, он охватывает очень большое количество проверок, поддерживает плагины для специальных проверок и, что наиболее важно, возвращает объект ошибки, как того требует форма redux.

В приведенном выше примере вы можете увидеть пример проверки. Вы можете предоставить несколько проверок для каждого поля (например, input), также вы можете предоставить текст для каждой ошибки, и после запуска проверки вы можете вернуть объект ошибки.

# Как определить состояние и изменения формы

Нашей последней важной задачей, которую нам нужно было решить, было определение текущего состояния формы и отслеживание его изменений. Я приведу пример - мы хотели определить, изменилось ли значение for по сравнению с его исходными значениями, чтобы, когда пользователь пытается перейти, мы могли уведомить его о том, что у него есть несохраненные изменения. Redux Form обеспечивает полную видимость текущего состояния формы. Вы можете обнаружить, что он грязный, первозданный, был ли он вообще затронут пользователем (фокус на элементе) и многое другое. Он также предоставляет внешний API, позволяющий инициировать изменения состояния, которые вы хотите, с помощью действий redux, например, вы можете отправить свою форму или сбросить форму с помощью действия redux без необходимости в фактической кнопке отправки, если она не нужна.

В заключение

Формы всегда сложны, и да, у каждой формы есть свои потребности, и иногда вам нужно найти решения и обходные пути, но большинство сценариев покрываются редукционной формой, и если это не так, вы можете легко перенести свое решение на работать с сокращенной формой. Для нас это отлично работает, и я надеюсь, что это сработает и для вас

Давайте работать вместе @ Bizzabo, присоединяйтесь к нам!

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсудить рекламные и спонсорские возможности.

Чтобы узнать больше, прочтите нашу страницу о нас, поставьте лайк / напишите нам в Facebook или просто tweet / DM @HackerNoon.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!