Итак, вы только что начали с реагирования, и вы начали строить Access Apps, и вам интересно, как я работаю с формами в реакции? Нет.
В этом руководстве я объясню, как реагирует с формами и событиями. Я также пойду на вас, как написать код, который помогает вводить вход от различных компонентов формы и отправить данные в приложении React.
Наконец, я покажу, как использовать Formik Библиотека для создания всех видов форм, от простого в комплексном.
Формы и события в реакции
Прежде чем мы начнем писать код, важно отметить, как реагировали с форм и событиями. Рассмотрим этот простой входной тег ниже:
Чтобы получить данные внутри входного тега, вам нужно как-то получить контент. Это не легко реагировать, так как нет предустановленного API, чтобы помочь с этим, как Vue.js ‘v-модель или модель цар-углов.
Это не легко, но это можно сделать. Как?
Убедившись, что вид (входное, поле SELECT или TEXTAREA) всегда находится в синхронизации с состоянием. Это означает, что значение для входного элемента должно быть сначала создано в состоянии, а затем установлено значением состояния в функции Render ().
Что-то вроде блока кода ниже: Как вы можете видеть в блоке кодового блока выше, входной элемент имеет значение this.state.inputvalue, что означает значение входного элемента, установлена в синхронизации с помощью ввода в состоянии. Это, по сути, приводит к тому, что все, что набрано в поле ввода, будет храниться в состоянии, но здесь есть проблема.
Реагистрация не знает, как обнаружить, есть ли изменение в входном элементе, если произошло дополнение или удаление. Использование обработчика событий формы – Onchange для проверки наличие изменений.
Это приведет к блоке кода ниже: в блоке кода выше, входной элемент теперь имеет дополнение к событию Onchange. Событие ONChange будет выполнено всякий раз, когда есть изменение в входном элементе И он установлен для выполнения функции HandleChange ().
Функция HandleChange () всегда будет автоматически устанавливать состояние в текущее значение ввода. Еще одно следует отметить, это добавление новой линии кода внутри конструктора.
Это. HandleChange.handleChange.bind (это);
Линия кода выше используется для привязки функции HandleChange (). Это сделано, потому что в JavaScript методы класса не связаны по умолчанию. Если это не сделано, функция HandleChange () вернет не определено, когда вызывается событие Onchange.
Так что отреагируйте, как хранить значения от входного элемента в состояние сейчас, но как мы имеем дело с представлением формы. Очень простой. Посмотрите на блок кода ниже: это, по сути тот же блок кода, который видел выше, но с несколькими дополнениями. Теперь форма имеет мероприятие ONSUBMIT, которое выполняет функцию Handlesubmit.
Функция Handlesubmit () делает две вещи; Он регистрирует текущее значение входного элемента всякий раз, когда форма отправляется и, самое главное, что предотвращает поведение HTML-форма по умолчанию для просмотра на новую страницу. Линия код ниже также добавляется в конструктор, чтобы связать функцию Handlesubmit.
this.handlesubmit.handlesubmit.bind (это);
Важно отметить, что есть разные методы для привязки функций. Привязка их в конструкторе – одностороннее, но мы также можем использовать жирные стрелки.
См. Блок кода ниже для справки: приведенный выше синтаксис гарантирует, что это связано в функции Handlesubmit.
Весь процесс выше синхронизации значения входного элемента в состояние называется Управляемые компоненты Отказ Мы по сути сделали реагирование на единый источник истины. Компонент реагирования, который отвечает за рендеринг формы, также отвечает за то, что происходит всякий раз, когда пользователь добавляет что-либо в форму.
Теперь, когда мы видели, как реагировали с формыми и как обеспечить синхронизацию ценностей с состоянием, давайте создадим правильную форму с различными типами полей, то есть , , , радио так далее
Блок/демонстрация кода ниже имеет весь код, необходимый для демонстрации того, как иметь дело с различными полями формы. Мы будем проходить через каждого из них, чтобы увидеть, как это работает. Вход Реализация кода для поля ввода простой. Значение устанавливается в синхронизации с полным именем, которое уже объявлено в состоянии. Мероприятие ONChange используется для выполнения функции HandleChange, если есть изменение в поле ввода.
Единственная новая вещь на приведенном выше поля ввода – это добавление атрибута имени. Поскольку мы будем иметь дело с несколькими полями ввода, важно отметить, какой из них фактически изменяется, и атрибут имени помогает с этим. Значение атрибута имени должно быть одинаково с значениями состояния, объявленные в конструкторе.
Это также почему существует изменение функции HandleChange. В приведенном выше блоке кода функция HandleChange использует атрибут имени, который был назначен различным входным элементам, чтобы определить, что делать на основе значения Event.Target.Value
Textarea Поле Textarea также работает аналогичным образом для поля ввода. Значение устанавливается в синхронизации с сообщением, которое уже объявлено в состоянии. Он также имеет атрибут имени, и он установлен на сообщение.
Выберите Элемент SELECT имеет атрибут Value, который устанавливается в синхронизации с редактором, который уже объявлен в состоянии. Поскольку это раскрытие вариантов, важно знать, что выбрано, поэтому каждый из тегов на опции имеет свой собственный атрибут значения с уникальным содержимым.
Флажок Реализация элемента флажков в React Forms немного отличается от других выше. Вместо того, чтобы установить значение this.state.terms к атрибуту значений на поле ввода, он установлен на проверенный атрибут. Значение состояния также должно быть логическое значение, это означает либо правдоподобное или ложное значение. Радио Реализация радиоэлемента в React Forms работает аналогично аналогичной моде для флажков выше. Все радио элементы имеют одинаковый атрибут имени, но с различными атрибутами значения, как видно выше, где значение для радио Да и значение для без радио – Нет Отказ Проверенный атрибут используется для установки значения состояния либо либо Да или нет, как видно выше, когда выбран один из двух.
Использование Formik
https://github.com/jaredpalmer/formik
Если вы думаете, что настройка React Forms в способе выше, немного стрессовой и тревожной, то у меня есть хорошие новости для вас. Formik Библиотека помогает сделать мощные и легкие формы в реакции. Это дает вам возможность захватывать и манипулировать значениями, установить ошибки и предупреждения, настроить входы и многие другие функции, которые создают формы здания легко.
Formik отслеживает состояние вашей формы, а затем выставляет его плюс несколько многоразовых методов и обработчиков событий (HandleChange, HandleBlur и Handlesubmit) к вашей форме через реквизиты. HandleChange и HandleBlur работают точно так, как ожидалось – они используют атрибут имени или идентификатора для выяснения, какое поле для обновления. – https://github.com/jaredpalmer/formik.
Компонент Formik в сочетании с YUP Может использоваться для записи потрясающих валидаций формы. Да используется для проверки схемы объекта, и это означает, что он может быть использован в качестве валидатора для при создании React Forms с Formik.
Когда дело доходит до API formik, есть три важных API для рассмотрения и понимания:
- сформиик (варианты)
- <Поле/>
- < Форма/>
сформиик (варианты)
Asformik (опции) позволяет создавать класс компонента реагирования на более высокий порядок. Затем вы можете пройти в некоторых реквизитах и обработчиках формы в компоненте на основе прилагаемых вариантов. Давайте посмотрим на некоторые доступные варианты, которые могут быть в сформиике.
Handlesubmit.
Handlesubmit, как называет имя, помогает с представлением формы в Pormik. Он автоматически передается значения формы и любые другие реквизиты, завернутые в компонент.
MapPropstalues.
MapPropstolues используется для инициализации значений состояния формы. Formik передает результаты MapPropstolues в обновленное состояние формы и делает эти значения доступными для нового компонента в качестве Props.values.
Validationschema.
Это может функция, которая возвращает схему YUP или саму фактическую схему YUP. Это помогает с проверкой внутри формы.
<Поле/>
Компонент поля в Formik используется для автоматической настройки RACT Forms с Formik. Он может получить значение, используя атрибут имени, он использует атрибут имени для соответствия состоянию Formik, и он всегда устанавливается на входной элемент. Это может быть легко изменено, указав компонент опоры. < Форма/>
<ФОРМА/> – это помощник компонента, который помогает сэкономить время. Это помогает предотвратить вынос
, как код ниже: с этими основыми поняты, давайте посмотрим, как Formik можно использовать для создания и проверки формы React.Как и контролируемые компоненты выше, будет построена полноценная форма, и мы затем отправимся на разные части формы и как она работает. Весь код/демонстрация можно просматривать со ссылкой ниже. В блоке кода выше первые строки кода являются импортом. Мы импортируем реагирование, визуализируйте из React-DOM, некоторых компонентов из Formik с деструктивной заданием. Да, который является валидатором схемы объекта JavaScript, также импортируется. Следующий блок Code – это функция приложения стрелки жира с параметром реквизита. Параметр опоры устанавливается на объект, который содержит значения, которые будут использоваться в приложении. Все детали, полученные из формы, хранятся в значениях, ошибки проверки хранятся в ошибках, коснулись – это логическое значение, которое проверяет, находится ли входное поле, HandleChange помогает выполнить определенную функцию всякий раз, когда есть изменение в поле ввода и Issubmitting также является логическим значением, которое настроен на True, когда нажал нажатие.
Функция приложения также возвращает Div, который содержит разметку JSX для формы.
На линии 17 , компонент
Я выделим различные полевые компоненты и входные элементы в компоненте формы и как они работают с Formik.
Ввод текста Компонент поля всегда должен установить на входной элемент. Так что все, что осталось, это определить атрибут имени, чтобы Formik может автоматически получить значение.
Линия кода над компонентом поля просто используется для валидационных целей. Он проверяет, будет ли входным элементом в фокусе с прикосновением. ChareLName, а затем проверяет, есть ли какие-либо ошибки с ошибками. Полное значение, если есть ошибки, то он показывает пользовательское сообщение в валидаторе схемы объекта. Я коснусь установки для проверки позже.
Выберите Как упомянуто выше, состояние по умолчанию компонент поля установлено на вход, но это может быть легко изменено, указав компонент PROP, как видно выше. Атрибут имени установлен в редактор и имеет два элемента варианта с разными значениями. Первая строка кода также используется для проверки, как объяснено выше.
Радио Для радиоэлемента мы не можем использовать компонент поля, но вместо этого старомодный путь с входом и типом радио. Оба параметра радиостанции устанавливаются на атрибут того же имена, но каждая опция радио имеет другое значение.
Флажок Элемент Checkbox здесь является полевой компонент с типом флажков. Проверенное событие устанавливается для изменения значения стоимости рассылки либо на правдовую или фальсию.
Отправить кнопку
Другое, что следует отметить, что элемент кнопки. Formik автоматически обнаруживает, что нажатие на элемент кнопки в конце форме означает намерение пользователя, чтобы представить все детали формы.
<кнопка отключено = {issubmittion}> Отправить
Испуган представляет собой государство подачи. Это либо устанавливается на правдовую или ложное значение. Когда он настроен на true, кнопка будет отключена, когда Formik обращается к обработчику Handlesubmit.
Функция DisplayFormikState – это функция бездействия, которая помогает показать необработанные данные и значения ошибок в форме через реквизиты. FormikApp используется для охвата всей формы в компоненте сформиика более высокого порядка (HOC). Функция MapsSpropstalues помогает преобразовать внешние опоры, которые мы определили в функции приложения ранее в значениях формы. Он возвращает все значения, полученные из деталей формы. Следующее следует отметить, что ValidationChema.
ValidationsChema – это то, что помогает с проверкой формы. Использует YUP , который является валидатором схемы объекта для достижения этого.
Как вы можете видеть выше, имя значения установлено на YUP, а затем вы решаете, должен ли значение быть нить , Номер , логический или Дата . Вы также можете убедиться, что значение требуется путем цепочки требуется () и поместив сообщение об ошибке внутри скобок.
Да также позволяет вам установить минимальную длину строки с помощью min () API. Он принимает два значения, количество символов и сообщение об ошибке, если значение не зависит от этой суммы.
Вы можете проверить YUP Документация Для получения дополнительных API и как вы можете проверить свои формы лучше.
Функция Handlesubmit – это обработчик подачи, он принимает значения (которые содержит детали формы), ruseform, который используется для сброса всех значений формы, SetErrors, которые устанавливают сообщения об ошибках, если есть ошибки и SOUTSUBMITTION, используются для установки Опустить нет.
Затем наша форма обернута в сформистский HOC и Formikapp отображается в приложении React.
Со всем вышеупомянутым, вы можете увидеть, насколько легко Forficik создает приложения React React.
Заключение
В этом руководстве мы проходили руководство, как строить формы с реагированием. Я подчеркнул тот факт, что React не отправляет с возможностью обращения по умолчанию образует формы, вам придется использовать событие HandleChange для проверки изменений и одновременно синхронизироваться с состоянием. Я также объяснил основы контролируемых компонентов в реакции
Мы также использовали Pormik, который в основном является HOC, который помогает с строительством форм. Мы проходили через разные API, которые отправляются с Formik, а также как их использовать.
Демо-код и код для формы, построенные с контролируемыми компонентами, можно увидеть на CodeSandbox и что из формика можно увидеть здесь слишком.
Plug: Logrocket, DVR для веб-приложений
Logrocket Это инструмент для ведения журнала Frontend, который позволяет вам повторить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей на скриншоты и журнал свалки, Lognocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от основ и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ Ngrx/Store.
В дополнение к регистрации действий и состояния Redux, Lognocket Records Console Logs, ошибки JavaScript, Stacktraces, Networks/Ответы с заголовками + тел, метаданные браузера и пользовательские журналы. Он также привлекает инструменты DOM для записи HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных приложений для одной страницы.
Попробуйте бесплатно.
Пост Императивное руководство по форм в React появился первым на Logocket blog Отказ
Оригинал: “https://dev.to/bnevilleoneill/an-imperative-guide-to-forms-in-react-5162”