Лабораторная работа №3: Управление состоянием

Цель работы

Научиться использовать useState для управления состоянием формы.

Теоретическая часть

В React управление состоянием — это один из ключевых аспектов разработки интерактивных приложений. Основные понятия:

Состояние (state) — данные, которые могут изменяться в течение жизненного цикла компонента
Хук useState — встроенный хук React, который позволяет добавлять состояние в функциональные компоненты
Обработчики событий — функции, которые вызываются при возникновении определенных событий (например, при вводе текста в поле ввода)

Синтаксис использования useState:

const [state, setState] = useState(initialValue);

Где:

state — текущее значение состояния
setState — функция для обновления состояния
initialValue — начальное значение состояния

Задание

Создать форму с полями: ФИО, email. При вводе данные отображаются под формой.

Пошаговая инструкция

Создайте компонент формы

В папке src/components создайте новый файл UserInfoForm.js.

# В терминале
touch src/components/UserInfoForm.js

Импортируйте useState

Откройте файл UserInfoForm.js и добавьте импорт useState из React:

import React, { useState } from 'react';

Создайте компонент формы

Добавьте следующий код в файл UserInfoForm.js:

function UserInfoForm() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); return (

setName(e.target.value)} /> setEmail(e.target.value)} />

ФИО: {name}

Email: {email}

); } export default UserInfoForm;

Импортируйте компонент в App.js

Откройте файл src/App.js и добавьте импорт компонента:

import UserInfoForm from './components/UserInfoForm';

Используйте компонент в App.js

Замените содержимое функции return() на следующий код:

return (
  
    Форма пользователя
    
);

Проверьте результат

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

Если при вводе данных в поля они сразу же отображаются под формой, значит, вы правильно реализовали управление состоянием с помощью useState.

Ожидаемый результат

Вы должны увидеть на странице форму с двумя полями ввода: "ФИО" и "Email". Под полями ввода должны отображаться введенные данные в реальном времени.

Критерий	Баллы
Использован `useState`	3
Поля управляются состоянием	3
Данные отображаются в реальном времени	2
Нет ошибок	2
Итого	10

Связь с демонстрационным экзаменом

Эта лабораторная работа связана с профессиональной компетенцией:

ПК: Создавать программный код на стороне клиента в соответствии с техническим заданием

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

Лабораторная работа №3: Управление состоянием — useState и управление формами

Цель работы

Теоретическая часть

Задание

Пошаговая инструкция

Форма пользователя

Ожидаемый результат

Критерии оценки

Связь с демонстрационным экзаменом