KendoReact Form — это быстрый и небольшой пакет для управления состоянием формы, созданный на основе React и разработанный с учетом лучших практик. В этой статье мы рассмотрим, как разработать контактную форму с помощью этого компонента React Form.
Размер gzipped и minified пакета React Form составляет 5 КБ. Компонент интегрируется со всеми компонентами KendoReact и в настоящее время используется встроенным редактором планировщика KendoReact. Для получения состояния своего поля, обработки событий компонента и рендеринга пользовательских компонентов компонент React Form использует следующие компоненты:
- Компонент KendoReact Field и интерфейс FieldRenderProps
- компонент KendoReact FieldArray и интерфейс FieldArrayRenderProps.
Кроме того, когда вам необходимо создать макеты форм, библиотека KendoReact Form также предоставляет следующие компоненты:
- компонент KendoReact FormElement
- Компонент KendoReact FieldWrapper
В этом посте я продемонстрирую, как использовать компонент KendoReact Form для создания простой контактной формы React.
Предварительные условия
Чтобы следовать этому руководству, вам необходимо иметь:
- React v16 или новее
- базовое понимание React
- редактор кода
Настройка проекта React
Те, кто уже знаком с созданием React-приложений с помощью npx, могут пропустить это, потому что далее я покажу, как запустить React-приложение для тех, кто не знаком.
Вам нужно выполнить следующие шаги, и вы получите сервер разработки приложений React, запущенный на вашей локальной машине. Во-первых, введите следующую команду в предпочитаемый вами интерфейс командной строки (CLI), затем выполните следующую команду-шаблон, предоставленную React, чтобы быстро настроить проект React для разработки.
npx create-react-app task-organizer --use-npm
cd task-organizer
npm start
Найдите каталог проекта Task-organizer и откройте его в редакторе кода. Теперь вы можете начать с сокращения кодов в файле App.js, чтобы они выглядели следующим образом:
import "./App.css";
function App(){
return <div classname="app"></div>
}
export default App;
Теперь, когда мы закончили создание нашего React-приложения, давайте приступим к установке зависимостей для приложения.
Установка зависимостей
Далее, давайте добавим пакеты KendoReact, которые мы будем использовать для этого проекта. Я буду использовать тему KendoReact Default для этого проекта, но существуют и другие варианты — например, темы KendoReact Bootstrap и KendoReact Material.
Установите тему KendoReact Default, выполнив в терминале следующую команду.
npm install --save @progress/kendo-theme-default
Интеграция нескольких компонентов KendoReact
KendoReact — это богатый набор из множества модульных компонентов. В этой демонстрации мы будем использовать несколько компонентов, импортированных из этой библиотеки React UI, для создания контактной формы. Ниже приведены зависимости и одноранговые зависимости; выполните команду, чтобы начать установку.
npm install --save @progress/kendo-react-form @progress/kendo-react-inputs @progress/kendo-react-labels @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-react-intl
Я уверен, что вы уже заметили область видимости @progress, которую мы использовали. Библиотека KendoReact предоставляет множество развязанных модулей для различных целей; все они имеют область видимости @progress (Progress Telerik является материнской компанией, создавшей KendoReact) — считайте, что это глобальная область видимости для модулей в KendoReact.
Примечание: KendoReact — это коммерческая библиотека UI-компонентов, и, как часть этого, вам нужно будет предоставить лицензионный ключ, когда вы будете использовать компоненты в своих проектах React. Вы можете получить лицензионный ключ через бесплатную пробную версию или приобрести коммерческую лицензию. Для получения дополнительной информации вы можете перейти на страницу лицензирования KendoReact.
Теперь, когда все необходимые модули установлены, давайте приступим к разработке контактной формы.
Контактная форма React
Начнем с импорта всех зависимостей, которые нам понадобятся; вставьте следующий код в файл App.js.
import * as React from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Error } from "@progress/kendo-react-labels";
import { Input, TextArea } from "@progress/kendo-react-inputs";
import "@progress/kendo-theme-default";
Выше мы импортировали form, field, formElement из @progress/kendo-react-form, Error из @progress/kendo-react-labels, плюс Input и TextArea из @progress/kendo-react-inputs. Это те компоненты, которые будут использоваться для разработки приложения. Для импортированного @progress/kendo-theme-default мы добавили в наш компонент тему стилизации по умолчанию.
Давайте перейдем к написанию функциональности EmailInput. Введите следующий код под импортами в файл App.js:
const emailValidator = (value) =>
emailRegex.test(value) ? "" : "Please enter a valid email.";
const EmailInput = (fieldRenderProps) => {
const { validationMessage, visited, ...others } = fieldRenderProps;
return (
<div>
<Input {...others} />
{visited && validationMessage && <Error>{validationMessage}</Error>}
</div>
);
};
В приведенном выше коде мы создали emailValidator, который хранит строку, представляющую собой условный набор, основанный на выводе emailRegex.test(value). Функция EmailInput получает аргумент fieldRenderProps и объекты validationMessage, visited и ...others деструктурируются из fieldRenderProps. Функция EmailInput также возвращает div, содержащий компонент input, который получает оставшиеся объекты(..other) и conditional отображает компонент Error с validationMessage.
Теперь, когда мы закончили с этим, давайте создадим нашу функцию App, которую мы будем отображать в браузере.
В функции EmailInput введите следующий код.
const App = () => {
const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
return (
<Form
onSubmit={handleSubmit}
render={(formRenderProps) => (
<FormElement
style={{
maxWidth: 750,
margin: "3em auto",
}}
>
<fieldset className={"k-form-fieldset"}>
<legend className={"k-form-legend"}>Contact Form</legend>
<div style={{ margin: "1em 0" }}>
<Field name={"firstName"} component={Input} label={"Email"} />
</div>
<div style={{ margin: "1em 0" }}>
<Field
name={"lastName"}
component={EmailInput}
validator={emailValidator}
label={"First Name"}
/>
</div>
<div style={{ margin: "2em 0" }}>
<Field
name={"email"}
type={"email"}
component={TextArea}
label={"Email"}
/>
</div>
</fieldset>
<div className="k-form-buttons">
<button
type={"submit"}
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
disabled={!formRenderProps.allowSubmit}
>
Submit
</button>
</div>
</FormElement>
)}
/>
);
};
export default App;
Сначала мы создали стрелочную функцию handleSubmit, которая принимает dataItem в качестве аргумента и вызывает функцию alerts с данными JSON, содержащими dataItem, null и 2. Но вы можете заменить это на REST API, который вы хотите использовать. Функция App также возвращает Форму, которая использует реквизиты рендеринга (в основном для решения сквозных проблем), чтобы динамически вводить FormElement в качестве реквизита.
В компоненте FormElement есть три поля, которые обернуты fieldset. Каждое поле принимает следующие реквизиты: name, component, label и validator для поля email. Реквизит label обозначает поле, а реквизит component определяет, является ли поле input, textarea и т.д. Реквизит name присоединяется к данным поля при отправке формы, а реквизит validator используется полем email для проверки письма.
Вот полный код файла App.js.
import * as React from "react";
import { Form, Field, FormElement } from "@progress/kendo-react-form";
import { Error } from "@progress/kendo-react-labels";
import { Input, TextArea } from "@progress/kendo-react-inputs";
import "@progress/kendo-theme-default";
const emailRegex = new RegExp(/S+@S+.S+/);
const emailValidator = (value) =>
emailRegex.test(value) ? "" : "Please enter a valid email.";
const EmailInput = (fieldRenderProps) => {
const { validationMessage, visited, ...others } = fieldRenderProps;
return (
<div>
<Input {...others} />
{visited && validationMessage && <Error>{validationMessage}</Error>}
</div>
);
};
const App = () => {
const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
return (
<Form
onSubmit={handleSubmit}
render={(formRenderProps) => (
<FormElement
style={{
maxWidth: 750,
margin: "3em auto",
}}
>
<fieldset className={"k-form-fieldset"}>
<legend className={"k-form-legend"}>Contact Form</legend>
<div style={{ margin: "1em 0" }}>
<Field name={"firstName"} component={Input} label={"Email"} />
</div>
<div style={{ margin: "1em 0" }}>
<Field
name={"lastName"}
component={EmailInput}
validator={emailValidator}
label={"First Name"}
/>
</div>
<div style={{ margin: "2em 0" }}>
<Field
name={"email"}
type={"email"}
component={TextArea}
label={"Email"}
/>
</div>
</fieldset>
<div className="k-form-buttons">
<button
type={"submit"}
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
disabled={!formRenderProps.allowSubmit}
>
Submit
</button>
</div>
</FormElement>
)}
/>
);
};
export default App;
На изображении ниже показана готовая копия демонстрационного проекта контактной формы.
Стоит отметить, что команда KendoReact разработала обширное руководство по проектированию форм, основанное на их многолетнем опыте создания компонентов пользовательского интерфейса. Руководство находится в свободном доступе на их сайте, и вы можете обратиться к нему, чтобы узнать больше о том, как создавать красивые формы и лучшие практики UX, даже если вы не используете саму форму KendoReact.
Заключение
В этом посте мы создали демонстрационный проект контактной формы React с помощью компонента React Form, предоставляемого библиотекой KendoReact. KendoReact Form можно использовать для создания любой формы, которую можно без труда интегрировать в любой существующий проект.