Формы являются важной частью веб-разработки, поскольку позволяют пользователям взаимодействовать с веб-приложениями․ В Ionic React, фреймворке для разработки мобильных приложений с использованием React․js, есть возможность создания и валидации форм․
Создание форм
Для создания формы в Ionic React можно использовать компонент IonItem внутри компонента IonList․ Вот пример⁚
<IonList>
<IonItem>
<IonLabel position="floating">Имя</IonLabel>
<IonInput type="text" name="name" value={name} onIonChange={e => setName(e․detail․value!)} required></IonInput>
</IonItem>
</IonList>
В примере выше мы использовали компоненты IonList, IonItem, IonLabel и IonInput для создания формы с полем для ввода имени пользователя․
Важно помнить, что если вы хотите, чтобы поле было обязательным для заполнения, вы должны добавить атрибут required к компоненту IonInput․
Валидация форм
Для валидации формы в Ionic React можно использовать хуки состояния и функции проверки․
Вот пример валидации формы⁚
const [name, setName] = useState('');
const [error, setError] = useState('');
const handleSubmit = (e⁚ React․FormEvent) => {
e․preventDefault;
if (name === '') {
setError('Пожалуйста, введите имя');
} else {
setError('');
// выполняем другие операции после успешной валидации
}
}
return (
<form onSubmit={handleSubmit}>
<IonList>
<IonItem>
<IonLabel position="floating">Имя</IonLabel>
<IonInput type="text" name="name" value={name} onIonChange={e => setName(e․detail․value!)} required></IonInput>
</IonItem>
</IonList>
<IonButton expand="full" type="submit">Отправить</IonButton>
{error && <p className="error-message">{error}</p>}
</form>
);
В примере выше мы используем хук состояния useState для хранения значения поля с именем пользователя и сообщения об ошибках․ При отправке формы мы проверяем, заполнено ли поле для ввода имени․ Если поле пустое, мы устанавливаем сообщение об ошибке с помощью функции setError, в противном случае сообщение об ошибке очищается и форма отправляется․
Чтобы показать сообщение об ошибке, мы проверяем значение ошибки с помощью условного оператора и выводим сообщение об ошибке как элемент p с классом error-message․
Это лишь пример базовой валидации формы․ Вы можете добавить свои собственные функции проверки и условия в зависимости от требований вашего приложения․
В Ionic React у вас есть возможность создавать и валидировать формы для ваших мобильных приложений․ Формы дают пользователям возможность взаимодействовать с приложением и отправлять данные, а валидация помогает гарантировать корректность этих данных․
Фреймворк Ionic обеспечивает наилучшую поддержку для создания быстрых, оптимизированных мобильных приложений для любой платформы, использующей React. Изучив этот учебник, вы узнаете, как создавать формы при работе с Ionic React и как сделать эти формы интерактивными, добавив правила валидации с полезными текстовыми инструкциями.
Ionic Framework — это набор инструментов пользовательского интерфейса, предназначенный для создания кросс-платформенных мобильных приложений с использованием HTML, CSS и JavaScript. Ionic 5, который выйдет в начале 2020 года, включает официальную поддержку React, что облегчает разработчикам React создание мобильных приложений с помощью привычных инструментов. Однако он также не поддерживает работу с формами. Кроме того, многие из существующих библиотек, предназначенных для построения форм в экосистеме React, не очень хорошо работают с компонентами Ionic Framework.
В этом уроке мы покажем вам, как создать форму с помощью ввода Ionic React UI. После этого вы также узнаете, как использовать эту библиотеку для обнаружения изменений во вводимой форме и реагирования на правила валидации. Наконец, вы узнаете, как добавить полезный текст в атрибуты ARIA, чтобы читатели экрана могли получить доступ к форме.
Компоненты формы Ionic
Формы являются важной частью большинства веб- и мобильных приложений. Независимо от того, предоставляете ли вы доступ к определенным частям вашего приложения через формы регистрации или входа, или собираете отзывы пользователей, вам необходимо создавать формы на определенном этапе жизненного цикла вашего приложения.
Ionic предоставляет готовые компоненты для работы с формами. Некоторые из них включают IonItem, IonLabel, IonInput, IonCheckbox и IonRadio. Вы можете комбинировать эти элементы для создания стандартных форм без добавления собственных стилей.
Например, следующий код :
создает следующую форму входа в систему
Стандартная форма входа в систему iOS
По умолчанию элементы форм Ionic хорошо выглядят на iOS или Android, но при использовании React они могут выглядеть не так хорошо. Как и в случае с большинством инструментов в экосистеме React, вам необходимо решить, как именно вы хотите спроектировать свои формы с точки зрения функциональности и доступности. И то, и другое не менее важно, чем дизайн.
Уже существует множество помощников для форм React, но большинство из них не будут работать с элементами форм Ionic. Основная причина этого заключается в том, что большинство существующих библиотек форм прослушивают onChange, в то время как onIonChange Ionic запускает событие при изменении значения поля.
Когда поле изменяется, происходит событие изменения.
React Hook Form : небольшая и быстрая библиотека форм React
К счастью, это не плохо. Недавно я наткнулся на React Hook Form (RHF), библиотеку для манипулирования формами в проектах React. Обеспечивая поддержку контролируемых и неконтролируемых элементов и валидации ввода, эта библиотека работает только с функциональными элементами, поскольку API основан на крючках.
На мой взгляд, наиболее привлекательной особенностью для разработчиков, использующих Ionic React, является оболочка компонентов, которую она предоставляет для управления. Элементы имеют свойство onChangename, которое можно использовать для определения имени события изменения в каждом случае, когда оно пересылается. В следующих разделах показано, как упростить работу с ионическими формами.
Создание формы регистрации
Давайте рассмотрим, как RHF может помочь с функциональностью форм при создании формы регистрации onChangename. Если вы используете последнюю версию Ionic CLI (запустите NPM I -G @IONIC/CLI для проверки), выполните следующую команду для запуска нового приложения Ionic в React.
В этом случае использовалась пустая модель. Вам нужно уметь переписывать существующие формы, чтобы легко использовать библиотеку форм React Hook, особенно если элементы описаны как функциональные элементы.
ПРИМЕЧАНИЯ. Прежде чем продолжить этот семинар, вам нужно удалить входы в файлы ExploreContainer и home.sx.
Чтобы начать работу с формами, установите пакет React Hook Forms, выполнив следующую команду в корневом каталоге проекта.
Это сделает библиотеку форм React Hook доступной для вашего проекта. Используйте эту библиотеку для создания полей ввода формы. Откройте файл home.sx и замените его содержимое на следующее: home.sx.sx.sx.sx.sx.sx.sx.sx.sx.
В результате у вас появится форма с единственным полем для ввода адреса электронной почты. Давайте проанализируем важные части.
Сначала разберите возвращаемое значение хука useform () из RHF. Значение ввода отправляется в функцию обработки, указанную при проверке формы HandLesubmit. Управление — это объект, содержащий метод, используемый для регистрации управляемого элемента в RHF.
Далее идет стандартный блок формальной формы, но в отличие от примера с формой ввода, передача элемента Ioninput элементу RHF устанавливает OnChangename на имя события изменения, устанавливает управление элементом и регистрирует событие изменения. Объект управления из формы вызова useform ().
Пока все в порядке, один и тот же код можно повторять много раз. Вы можете попытаться создать входной многоразовый элемент, который создает рамку ввода, используя указанные свойства.
Создайте файл с именем input.tsx в каталоге src / components и добавьте следующий код.
Этот элемент получает имя name и необязательные параметры управления, компоненты и метки и отображает поле ввода, используя уже импортированные элементы формы ion. Это уменьшает количество кода, который необходимо написать при создании полей ввода формы. Этот пункт можно использовать для заполнения остальной части формы. Отредактируйте файл home.sx, внеся в него следующие изменения
Теперь у вас есть ряд полей ввода формы (свойства, требующие только имени), каждое из которых отображается с помощью элемента ввода. Можно пойти еще дальше и сохранить данные поля в JSON-файл и использовать форму для сохранения кода в элементе. На данном этапе созданное приложение (запускаемое командой Ionic serve с http: // localhost: 8100) требует следующих форм
Запишите страницу формы.
Что насчет валидации полей?
Как вы могли заметить, в полях ввода формы по-прежнему отсутствует логика валидации. Если это реальное приложение, то может возникнуть множество нежелательных последствий, если API не настроен на проверку входящих данных. Кстати, API всегда должен проверять входящие данные.
RHF имеет валидацию в соответствии со стандартом HTML для встроенной валидации формы. Это идеально подходит для простой валидации, например, для объявления полей обязательными или для установки минимальной и максимальной длины поля. Для сложной логики валидации рекомендуется использовать Yup. Можно использовать любую библиотеку проверки формы объекта, но RHF поддерживает Yup как есть.
Настройте (и заполните) библиотеку, выполнив следующие команды
Затем добавьте его в импорт компонента.
Затем добавьте следующий код в верхнюю часть элемента
В данном случае мы создали схему объекта и добавили правила валидации для каждого свойства с помощью yup. Имя в объекте должно совпадать с именем в теге input формы. Если они не совпадают, правило не будет работать.
Наконец, обновите хук useForm(), чтобы использовать схему, определенную установкой свойства validationSchema следующим образом.
Теперь при нажатии на кнопку submit обработчик handleSubmit не вызывается, и данные формы не отправляются. Это именно то, что мы хотели, но, похоже, у пользователя нет возможности узнать, что именно происходит. Давайте исправим это, отобразив текстовую подсказку, когда поле заполнено неправильно.
Сначала обновите элемент Input следующим образом
В данном случае мы обновили элемент, чтобы он принимал дополнительное необязательное свойство, которое представляет собой объект ошибки из RHF. Мы также отображаем сообщение об ошибке в возвращаемом поле ввода при возникновении ошибки. И последнее: добавьте объект ошибки к неструктурированному объекту и обновите элемент в цикле.
Формы регистрации с сообщениями об ошибках (iOS)
Теперь форма предоставляет визуальную подсказку, когда пользователь сделал что-то не так. Сообщение об ошибке также можно изменить. Это можно сделать, передав строку используемому методу валидации. Например, в случае с электронной почтой вы можете
Улучшение доступности
Компоненты Ionic обычно являются обертками для нативных компонентов. Это означает, что он использует большинство, если не все, существующие функциональные возможности компонента. Определив атрибуты ARIA с соответствующим текстом, можно улучшить поля ввода и сделать их доступными для пользователей с ослабленным зрением.
Чтобы продолжить работу с образцом регистрационной формы, откройте файл Input.tsx и внесите следующие изменения
Элементы по умолчанию, передаваемые контроллеру IonInput, теперь включают атрибут aria-invalid, указывающий на наличие ошибки в поле, и атрибут aria-modifiedby, указывающий на соответствующее сообщение об ошибке. Сообщения об ошибках разворачиваются, а роль ARIA устанавливается на 'error'. Теперь, если в поле есть ошибка, программа чтения с экрана выделит это поле и зачитает сообщение об ошибке.
Заключение
Поздравляю! Вы узнали, как создавать и выполнять валидацию форм при работе с кроссплатформенными приложениями Ionic. Вы также определили, как сделать поля ввода доступными для пользователей с ослабленным зрением. Мы надеемся, что это руководство обеспечит прочную основу для создания форм в вашем собственном приложении Ionic React. Другие элементы для создания форм (такие как селекты и радио) не рассматриваются в этом руководстве, но вы можете найти более подробную информацию в официальной документации.
- Документация по фреймворку Ionic
- React hook формы
- Да Документация
- Доступность — MDN
Опубликуйте комментарий к текущей теме статьи. Комментируйте, подписывайтесь, нравится, не нравится, комментируйте, ставьте большой палец вверх!
