7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. React

Понимание форм и событий в React

Scroll to top
Read Time: 4 mins

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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

Если вы новичок в React, я бы порекомендовал прочитать вводный учебник по React для начала.

Начинаем

Начнем с создания нашего веб-приложения React. Создайте папку проекта под названием ReactFormApp. Внутри ReactFormApp создайте файл index.html и добавьте следующий код HTML:

Инициализируйте проект с помощью Node Package Manager (npm).

Заполните необходимые данные, и вы должны получить файл package.json внутри папки ReactFormApp.

Установите зависимости react и react-dom с помощью npm.

Установите необходимый пакет babel с помощью npm и сохраните его в файле package.json.

Пакеты babel необходимы для преобразования JSX-кода в JavaScript.

Создайте конфигурационный файл webpack для обработки конфигураций webpack. Создайте файл с именем webpack.config.js и добавьте следующие конфигурации:

app.js - это файл, в котором будет находиться наш код React. Создайте файл под названием app.js внутри папки ReactFormApp. Импортируйте необходимые библиотеки react в app.js. Создайте компонент под названием App, имеющий div с некоторым текстом. Выделите компонент с помощью метода рендеринга. Вот как выглядит основной файл app.js:

Сохраните изменения и попробуйте перезагрузить сервер разработки webpack.

После перезапуска сервера вы сможете просмотреть приложение React, запущенное на http://localhost:8080/.

React Form App Display ScreenReact Form App Display ScreenReact Form App Display Screen

Создание формы отзыва

У нас есть базовое приложение React. Перейдем к следующему шагу и попытаемся создать компонент формы с использованием кода JSX в app.js.

Создайте компонент под названием FormComp внутри app.js.

Внутри функции рендеринга для FormComp мы определим HTML-код для создания формы. Мы поместим пару лейблов, полей ввода и кнопку для клика. Вот как это выглядит:

Выделите компонент формы FormComp, чтобы отобразить форму внутри index.html.

Сохраните изменения и перезапустите сервер webpack, и вы сможете просмотреть форму.

React App Form TutorialReact App Form TutorialReact App Form Tutorial

Добавление событий в форму

Наша React форма хорошо выглядит Чтобы заставить ее взаимодействовать, нам нужно добавить события в форму.

Мы начнем с добавления переменных состояния в каждое из полей ввода, чтобы мы могли считывать значения этих полей. Зададим переменные состояния для имени и последних текстовых полей ввода.

Обязательно установите начальное состояние для указанных выше переменных. Определите функцию getInitialState внутри компонента FormComp и инициализируйте обе переменные.

Нам нужно обработать событие on-change полей ввода и назначить переменные состояния, когда значение в текстовых полях изменится. Поэтому определите событие onChange в полях ввода.

Определите функции onChange внутри FormComp и установите переменные состояния.

Попробуем преобразовать переменные состояния, используя их. Внутри FormComp HTML добавьте следующий элемент, отображающий переменные состояния.

Сохраните изменения и перезапустите сервер webpack. Попытайтесь ввести текст внутри текстового поля с именем и фамилией, и вы сможете просматривать результаты сразу же после ввода.

React Form App Form Fill React Form App Form Fill React Form App Form Fill

Затем добавим событие on-click в кнопку отправки, которую мы имеем на нашей форме.

Определите функцию handleClick внутри компонента FormComp. При нажатии кнопки «Отправить» мы свяжем имя и фамилию и отображаем полное имя внутри формы. Вот функция handleClick:

Также инициализируйте переменную Name в функции getInitialState.

Отобразите конкатенированное полное имя в форме HTML.

Вот как выглядит финальная версия компонента FormComp:

Сохраните указанные выше изменения и перезапустите сервер разработки. Введите оба имени и нажмите кнопку отправки, и в итоге должно отображаться полное имя.

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

В этом руководстве React вы узнали, как начать работу с приложениями React, и рассмотрели основные понятия о том, как обращаться с формами и событиями в веб-приложении на основе React. Надеюсь, этот учебник будет полезен для вас при создании приложений на основе React.

Исходный код этого учебника доступен в GitHub.

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.