ReactJS - Controlled Components: A Beginner's Guide

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

Что такое управляемые компоненты?

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

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

Почему использовать управляемые компоненты?

1. Единственный источник истины: Все данные формы хранятся в состоянии компонента.
2. Немедленный доступ к вводу: Вы можете получить доступ к значениям ввода сразу.
3. Больше контроля: Вы можете легко манипулировать и проверять данные ввода.

Теперь давайте脏 our hands с кодом!

Управляемый компонент с одним вводом

Давайте начнем с простого примера - поля ввода текста, которое здоровается с пользователем.

import React, { useState } from 'react';

function GreetingInput() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Привет, {name}!</p>
</div>
);
}

export default GreetingInput;

Разберем это:

1. Мы импортируем useState из React для управления состоянием нашего компонента.
2. Мы создаем переменную состояния name и функцию установщика setName.
3. Функция handleChange обновляет состояние name каждый раз, когда изменяется ввод.
4. В JSX мы устанавливаем значение value input'a в name и привязываем событие onChange к handleChange.
5. Мы отображаем приветствие, используя текущее значение name.

Это суть управляемого компонента - React контролирует значение ввода через состояние.

Попробуйте сами!

Введите свое имя в поле ввода. Заметьте, как приветствие обновляется instantly? Это магия управляемых компонентов!

Создание простого forms

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

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`Заказ размещен! Имя: ${order.name}, Размер: ${order.size}, Начинки: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="Ваше имя"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Маленькая</option>
<option value="medium">Средняя</option>
<option value="large">Большая</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="cheese"
checked={order.toppings.includes('cheese')}
onChange={handleChange}
/>
Сыр
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Пепперони
</label>
<button type="submit">Разместить заказ</button>
</form>
);
}

export default PizzaOrderForm;

Ух, это много кода! Но не волнуйтесь, мы разберем это шаг за шагом:

1. Мы создаем объект состояния order, который содержит все наши данные формы.
2. Функция handleChange стала сложнее. Она обрабатывает разные типы ввода:

• Для текстовых и select вводов она обновляет соответствующее свойство в состоянии.
• Для флажков она добавляет или удаляет начинки из массива.

3. У нас есть функция handleSubmit, которая предотвращает стандартное поведение отправки формы и показывает alert с деталями заказа.
4. В JSX мы создаем вводы для имени, размера (как select) и начинок (как флажки).
5. Значение каждого ввода (или состояние checked для флажков) контролируется состоянием order.

Мощь управляемых форм

С этим подходом вы имеете полный контроль над данными вашей формы. Хотите добавить проверку? Легко! Просто измените функцию handleChange. Нужно преобразовать данные перед отправкой? Просто обновите функцию handleSubmit. Возможности безграничны!

Общие методы для управляемых компонентов

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

Метод	Описание
useState	Хук для управления состоянием компонента
onChange	Обработчик события для изменений ввода
onSubmit	Обработчик события для отправки формы
preventDefault	Prevents стандартное поведение отправки формы
event.target.value	Получает текущее значение ввода
event.target.checked	Получает состояние флажка

Заключение

Поздравляю! Вы только что узнали о управляемых компонентах в React. Мы рассмотрели yks getInput, сложные формы и даже создали форму заказа пиццы (я уже голоден, думая об этом!).

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

Продолжая ваше путешествие в React, вы найдете无数的 способов использовать управляемые компоненты. Может быть, вы создадите редактор статей, форму регистрации пользователей или даже приложение для доставки пиццы (если да, пожалуйста, отправьте мне промокод!).

Продолжайте практиковаться, stay curious, и счастливого кодирования!

Credits: Image by storyset