Как создавать формы React для лучшего взаимодействия с пользователем

От автора: узнайте больше о том, как создавать формы в React, обладающие прекрасным пользовательским интерфейсом, при помощи KendoReact Form. В современных приложениях повсюду присутствуют формы, ведь независимо от того, создаёте ли вы новый онлайн магазин или форму подписки на новостной ресурс, вам определенно требуется настраивать формы и держать их под контролем.

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

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

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

И поэтому, в данной статье мы будет учиться пользоваться фантастическим компонентом KendoReact Form, чтобы создавать в React великолепные формы.

Компонент KendoReact Form

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

С выпуском версии KendoReact 4.0 для того, чтобы применять пакет пользовательского интерфейса, нам необходимо загрузить лицензионный ключ и поместить его в корень проекта.

В первую очередь мы устанавливаем @progress/kendo-licensing в качестве зависимости в нашем проекте:

yarn add @progress/kendo-licensing

Далее, все, что нам придется сделать – это запустить следующую команду, чтобы активировать лицензию:

yarn run kendo-ui-license activate

Выполнив это, мы успешно активируем лицензионный ключ. Теперь давайте начнем с установки пакета, запустив следующую команду:

yarn add @progress/kendo-react-form

При работе с пакетом KendoReact Form, мы будем иметь дело с тремя основными компонентами: Form (форма), FormElement (элемент формы) и Field (поле).

Для того, чтобы получить лучший пользовательский интерфейс для нашей формы, мы дополнительно установим несколько пакетов:

yarn add @progress/kendo-drawing @progress/kendo-react-buttons @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-theme-default @progress/kendo-react-labels @progress/kendo-react-common

Формы с помощью KendoReact

Сейчас мы создим форму заказа при помощи KendoReact Form. Мы увидим, насколько легко реализовать некоторые вещи, подобные кастомным компонентам, валидации и прочему. Сначала мы выполним импорт нескольких вещей в главный файл:

import React from 'react';
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Input, Checkbox } from '@progress/kendo-react-inputs';
import { Button } from '@progress/kendo-react-buttons';
import '@progress/kendo-theme-default/dist/all.css';

Первое, что мы сделаем, это создадим пользовательский компонент Input (поле ввода) из стандартного компонента в KendoReact.

Пользовательские компоненты

Давайте создадим пользовательское поле загрузки — Input. Мы можем сделать код более чистым и легким для интеграции с другими вещами, подобными валидации текстового поля, в будущем. Давайте создадим новый файл под названием Input и добавим в него следующий код:

import React from 'react';
import { Input as KendoReactInput } from '@progress/kendo-react-inputs';
import { Label, Error } from '@progress/kendo-react-labels'; const Input = ({ name, label, value, onChange, onBlur, visited, validationMessage, ...props
}) => { const editorId = name; return ( <div className="k-form-field"> <Label editorId={editorId}>{label}</Label> <KendoReactInput id={editorId} className="k-textbox" value={value} onChange={onChange} onBlur={onBlur} {...props} /> { visited && validationMessage && (<Error>{validationMessage}</Error>) } </div> );
}
export default Input;

Одна из распространенных ошибок создания компонентов для взаимодействия с пользователем при разработке форм заключается в том, что мы не объявляем атрибут label для компонента ввода. Кати Шервин написала статью под названием «Заполнители в полях форм вредны». В ней она объясняет, что поля ввода, содержащие заполните, замещающие метки, могут навредить удобочитаемости и иногда вызывают немало негативных последствий.

Компонент Input от KendoReact Form имеет поддержку для многих свойств, связанных с удобочитаемостью, в том числе и свойство для метки — label.

Теперь, когда у нас есть пользовательский компонент Input, мы создадим также пользовательский компонент чек-бокс — Checkbox. Давайте создадим новый файл с именем Checkbox и разместим в нем следующий код:

import React from 'react';
import { Checkbox as KendoReactCheckbox } from '@progress/kendo-react-inputs'; const Checkbox = ({ label, value, onChange, visited, error }) => ( <div> <KendoReactCheckbox label={label} value={value} onChange={onChange} /> </div>
); export default Checkbox

Теперь, когда у нас есть два пользовательских компонента, мы можем импортировать их в главный файл и начинать создавать форму:

import React from 'react';
import { Form, Field, FormElement } from '@progress/kendo-react-form';
import { Button } from '@progress/kendo-react-buttons';
import '@progress/kendo-theme-bootstrap/dist/all.css';
import Input from "./Input";
import Checkbox from "./Checkbox"; const App = () => { const handleSubmit = (data) => { console.log(data); } return ( <Form onSubmit={handleSubmit} render={({ allowSubmit }) => ( <FormElement> <Field name={'firstName'} component={Input} label={'First name'} /> <Field name={'lastName'} component={Input} label={'Last name'} /> <Field name={'cardNumber'} component={Input} label={'Card number'} /> <Field name={'expiryDate'} component={Input} label={'Expiry date'} /> <Field name={'cvv'} component={Input} label={'CVV'} /> <Field name={"email"} type={"email"} component={Input} label={"Email"} /> <Field name={"remember"} component={Checkbox} label={"Remember info"} /> <Button type="submit" disabled={!allowSubmit} primary > Submit </Button> </FormElement> )} /> );
} export default App;

Валидация

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

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

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

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

Свойство validator отвечает за вывод ошибки, чтобы мы могли узнать, какое именно поле неверно заполнено пользователем.

Давайте создадим файл с именем validate, и внутри этого файла мы объявим две простых функции. Первая функция будет применяться для валидации нашего поля ввода адреса электронной почты, назовем эту функцию validationEmail. Вторая функция будет выполнять валидацию других полей, и мы назовем ее validationField.

const emailRegex = new RegExp(/\S+@\S+\.\S+/); export const validationEmail = value =>
emailRegex.test(value) ? "" : "Please enter a valid email."; export const validationField = value => !value ? "Please enter a value" : "";

Теперь давайте импортируем функции validationEmail и validationField в главный файл. Внутри объявления поля email, мы передадим функцию validationEmail в качестве свойства validator, как в следующем примере:

<Field name={"email"} type={"email"} component={Input} label={"Email"} placeholder="Email address" validator={validationEmail}
/>

Для других полей формы в качестве свойства validator, мы передадим функцию validationField, как показано ниже:

<Field name="firstName" component={Input} label="First name" placeholder="Enter your first name" validator={validationField}
/> <Field name="lastName" component={Input} label="Last name" placeholder="Enter your last name" validator={validationField}
/> <Field name="cardNumber" component={Input} label="Card number" placeholder="Enter your card number" validator={validationField}
/> <Field name="expiryDate" component={Input} label="Expiry date" placeholder="Expiry date" validator={validationField}
/> <Field name={'cvv'} component={Input} label={'CVV'} placeholder="CVV" validator={validationField}
/>

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

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

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

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

KendoReact Form делает легкой задачу по созданию форм в React, как и по кастомизации всего, что мы захотим. Здесь есть целый диапазон различных компонентов, которые могут улучшить пользовательское восприятие по всем составляющим вашего приложения.

Заключение

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

KendoReact Form – это совершенная и полная библиотека пользовательских интерфейсов для приложений React. Она содержит большое количество разного рода компонентов для всевозможных подходов и готовых решений, которые могут помочь вам ускорить работу приложения, имея в запасе более надежный и масштабируемый набор компонентов.

Автор: Leonardo Maldonado

Источник: www.telerik.com

Редакция: Команда webformyself.