Завершение серии из двух частей с проверкой и отправкой.

Это часть серии из двух частей, начинающейся с React Native и Forms Redeux: Часть 1.

Проверка

В следующем примере мы хотим убедиться, что поля имени и фамилии не пустые и не пустые (только пробелы), прежде чем можно будет отправить форму; наблюдайте за отключенной кнопкой.

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

Как и раньше, мы начинаем с копирования папки RefactorForm в папку ValidationForm (при необходимости переименовывая компоненты) и добавляем в App.js.

Затем мы обновляем компонент FKTextInput; принятие и использование некоторых дополнительных свойств Formik (из Field); мы также вносим некоторые изменения в стиль. Эти изменения реализуют поведение проверки на уровне поля.

компоненты / FKTextInput / index.js

Наблюдения:

  • Чтобы Formik мог определить, было ли выполнено взаимодействие с полем (тронул), нам нужно передать field.onBlur в TextInput (как и в случае с onChange, нам нужно указать имя поля)
  • form.errors указывает, есть ли в поле ошибка; это объект, связанный с именами полей
  • form.touched указывает, выполнялось ли взаимодействие с полем; это объект, связанный с именами полей
  • Эти изменения не влияют на SimpleForm, поскольку для него нет правил проверки.

примечание: спасибо за react-devtools; Хотя документация Formik хороша, мне было трудно найти документацию по предоставленным свойствам для компонента настраиваемого поля. Их было намного проще просто осмотреть напрямую.

компоненты / FKTextInput / styles.js

Чтобы реализовать поведение проверки на уровне формы, мы используем свойство isV alid, предоставленное Formik, для условного отключения кнопки отправки.

компоненты / ValidationForm / index.js

Теперь, когда мы реализовали все изменения на уровне представления для проверки, мы реализуем логику проверки.

компоненты / ValidationForm / index.js

Наблюдения:

  • Функция validate вызывается при каждом взаимодействии с формой, например, при вводе информации в поле (Formik позволяет изменить это поведение)
  • Возвращаемый объект функции validate указывает, какие ошибки существуют; ключи - это имена полей, а значения - это сообщение об ошибке
  • В этом случае мы реализовали наши правила валидации вручную. Formik рекомендует более декларативный подход с использованием библиотеки yup для общих стратегий проверки.

Refactor2

Глядя на компонент ValidationForm, мы начинаем видеть, как смешиваем логику (validate) с представлением (render) в том же файле. Кроме того, труднее устранять неполадки свойств рендеринга, поскольку вы не можете видеть параметры с помощью redux-devtools, как вы можете видеть свойства компонента.

Мы можем заменить свойство render на свойство component для решения этих проблем.

Как и раньше, мы начинаем с копирования папки ValidationForm в папку Refactor2Form (переименовывая компоненты соответствующим образом) и добавляем в App.js.

Сначала мы извлекаем то, что было функцией render, в компонент React.

компоненты / Refactor2Form / Refactor2FormView / index.js

А потом используем его в форме.

компоненты / Refactor2Form / index.js

Отправка

Часто обработчик отправки формы является асинхронным и требует времени для завершения. В этой ситуации распространенным шаблоном является отключение элементов формы до завершения отправки.

примечание: после того, как я сделал эти снимки экрана, я переименовал кнопку с Отправить проверки на Отправить отправку; на всякий случай заметили.

Также распространено сообщение об успехе или неудаче; Кроме того, в случае успеха обычно можно сбросить форму.

Это уже устарело, но ... Мы начинаем с копирования папки Refactor2Form в папку SubmissionForm (переименовывая компоненты соответствующим образом) и добавляем в App.js .

Нам нужно определить отключенное состояние в компоненте FKTextInput; используется при отправке формы.

примечание: хотя мы могли напрямую получить isSubmitting непосредственно в FKTextInput, мы хотим обобщить отключенное состояние, поскольку могут быть другие причины для отключения поля. .

компоненты / FKTextInput / index.js

Наблюдения:

  • Поскольку мы хотим убедиться, что этот компонент работает с предыдущим примером, мы делаем disabled необязательным свойством, но устанавливаем его значение по умолчанию на false.
  • С помощью React Native TextInput мы реализуем отключенное состояние с двумя свойствами: editable и selectTextOnFocus.

Затем мы определяем состояние отключенного, успешного и неудачного в SubmissionFormView; применив небольшую стилизацию для ясности.

компоненты / SubmissionForm / SubmissionFormView / index.js

Наблюдения:

  • Объект status - это объект произвольной формы, т.е. status.succeeded и status.failed - это то, что мы создадим

компоненты / SubmissionForm / SubmissionFormView / styles.js

Наконец, мы создаем асинхронный обработчик отправки (просто ждем три секунды).

компоненты / SubmissionForm / index.js

  • В отличие от других библиотек форм, например, Redux Form, обработка асинхронных обработчиков отправки довольно проста; особенно при использовании асинхронных функций
  • Чтобы продемонстрировать ситуацию сбоя, просто раскомментируйте строку с ошибкой.

Подведение итогов

Хотя мы рассмотрели наиболее распространенное использование форм, Formik может сделать больше, например, асинхронную проверку. См. Расширяющийся список примеров для идей.

Хорошо… Я уверен, что моей следующей библиотекой форм React будет Formik; нет ничего проще, чем это. Мне просто жаль, что я не узнал об этом до того, как я написал ту другую статью об использовании Redux Form (но я скажу, что Redux Form хорошо мне служил на протяжении многих лет).