Введение в события в приложении «Менеджер расходов»

Здравствуйте, будущие разработчики React! Сегодня мы окунёмся в захватывающий мир событий в нашем приложении «Менеджер расходов». Не волнуйтесь, если вы новички в программировании – я проведу вас через каждый шаг с терпением kindergarten учителя, объясняющего, почему небо голубое. Так что возьмите своё любимое напиток, устройтесь поудобнее и отправляйтесь в это кодинговое приключение вместе со мной!

Что такое события в React?

Прежде чем мы перейдём к коду, давайте поймём, что такое события. Представьте, что вы на вечеринке (конечно, вечеринке React), и каждый раз, когда вы taps someone на плечо, они react. Это essentially что события в React – это действия, которые вызывают отклики в вашем приложении.

В нашем приложении «Менеджер расходов» мы будем использовать события, чтобы сделать наше приложение интерактивным и отзывчивым на действия пользователей. Например, когда пользователь нажимает кнопку, чтобы добавить новую статью расходов, это событие, которое мы должны обработать.

Обработка событий в приложении «Менеджер расходов»

Теперь, давайте закатаем рукава и добавим немного интерактивности в наш «Менеджер расходов». Мы начнём с простого примера и постепенно перейдём к более сложным взаимодействиям.

1. Добавление кнопки «Добавить статью расходов»

Сначала добавим кнопку, которую пользователи могут нажать, чтобы добавить новую статью расходов. Мы создадим новый компонент под названием AddExpenseButton.

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('Кнопка 'Add Expense' нажата!');
};

return (
<button onClick={handleClick}>Добавить статью расходов</button>
);
};

export default AddExpenseButton;

Давайте разберём это:

• Мы импортируем React (всегда необходимо для JSX).
• Мы определяем функциональный компонент под названием AddExpenseButton.
• Внутри компонента мы определяем функцию handleClick. На данный момент она просто выводит сообщение в консоль.
• В return语句е мы рендерим кнопку с атрибутом onClick. Этот атрибут является тем, как мы привязываем наш обработчик событий к кнопке.

Теперь каждый раз, когда кнопка нажата, 'Кнопка 'Add Expense' нажата!' будет выведено в консоль. Это как научить ваше приложение говорить – каждый клик это слово, которое оно учится!

2. Создание формы для статьи расходов

Далее создадим форму, где пользователи могут ввести детали своей статьи расходов. Мы назовём этот компонент ExpenseForm.

import React, { useState } from 'react';

const ExpenseForm = () => {
const [title, setTitle] = useState('');
const [amount, setAmount] = useState('');
const [date, setDate] = useState('');

const handleTitleChange = (event) => {
setTitle(event.target.value);
};

const handleAmountChange = (event) => {
setAmount(event.target.value);
};

const handleDateChange = (event) => {
setDate(event.target.value);
};

const handleSubmit = (event) => {
event.preventDefault();
console.log('Форма отправлена:', { title, amount, date });
// Здесь вы обычно отправляли бы эти данные в родительский компонент или API
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Название статьи расходов" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Сумма" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Добавить статью расходов</button>
</form>
);
};

export default ExpenseForm;

Уф, это много информации для переваривания! Давайте разберём это по шагам:

1. Мы импортируем useState из React для управления состоянием нашей формы.
2. Мы создаем переменные состояния для title, amount и date с помощью хука useState.
3. Мы определяем функции обработчиков для каждого поля ввода. Эти функции обновляют состояние при вводе пользователя.
4. Мы создаем функцию handleSubmit, которая предотвращает поведение по умолчанию при отправке формы и выводит данные формы.
5. В JSX мы создаем форму с полями ввода для названия, суммы и даты. Каждое поле ввода имеет атрибут value (контролируемый состоянием) и атрибут onChange (указывает на функцию обработчика).
6. Форма имеет атрибут onSubmit, который указывает на нашу функцию handleSubmit.

Эта форма как хорошо обученный секретарь – она внимательно слушает всё, что вы告诉她, и запоминает это всё!

3. Поднятие состояния вверх

Теперь, давайте представим, что мы хотим добавить новую статью расходов в список расходов. Нам нужно поднять наше состояние вверх к родительскому компоненту. Давайте создадим компонент ExpenseManager:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} />
</div>
);
};

export default ExpenseManager;

И давайте изменим наш ExpenseForm, чтобы использовать проп onAddExpense:

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ... предыдущие определения состояния и обработчиков ...

const handleSubmit = (event) => {
event.preventDefault();
onAddExpense({ title, amount, date });
setTitle('');
setAmount('');
setDate('');
};

// ... остальная часть компонента ...
};

export default ExpenseForm;

Теперь, когда форма отправлена, она вызывает функцию onAddExpense, переданную из родителя, добавляя новую статью расходов в список. Это как семья, работающая вместе – ребёнок (ExpenseForm) говорит родителю (ExpenseManager) о новой статье расходов, и родитель запоминает её для всех!

4. Добавление функции удаления

Наконец, добавим возможность удаления статей расходов. Мы изменим наш компонент ExpenseList:

import React from 'react';

const ExpenseList = ({ expenses, onDeleteExpense }) => {
return (
<ul>
{expenses.map((expense, index) => (
<li key={index}>
{expense.title} - ${expense.amount} ({expense.date})
<button onClick={() => onDeleteExpense(index)}>Удалить</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

И обновим наш ExpenseManager:

import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import ExpenseList from './ExpenseList';

const ExpenseManager = () => {
const [expenses, setExpenses] = useState([]);

const addExpense = (expense) => {
setExpenses((prevExpenses) => [...prevExpenses, expense]);
};

const deleteExpense = (index) => {
setExpenses((prevExpenses) => prevExpenses.filter((_, i) => i !== index));
};

return (
<div>
<ExpenseForm onAddExpense={addExpense} />
<ExpenseList expenses={expenses} onDeleteExpense={deleteExpense} />
</div>
);
};

export default ExpenseManager;

Теперь у нас есть полностью функциональный «Менеджер расходов» с возможностью добавления и удаления!

Заключение

Поздравляю! Вы только что создали интерактивное приложение «Менеджер расходов». Вы научились обрабатывать события, управлять состоянием и передавать данные между компонентами. Помните, что обучение React похоже на обучение езде на велосипеде – сначала это может казаться неустойчивым, но с практикой вы быстро научитесь!

Вот таблица, резюмирующая обработчики событий, которые мы использовали:

Обработчик событий	Компонент	Назначение
handleClick	AddExpenseButton	Записывает сообщение в консоль при нажатии кнопки
handleTitleChange	ExpenseForm	Обновляет состояние заголовка при изменении поля ввода
handleAmountChange	ExpenseForm	Обновляет состояние суммы при изменении поля ввода
handleDateChange	ExpenseForm	Обновляет состояние даты при изменении поля ввода
handleSubmit	ExpenseForm	Prevents default form submission and adds a new expense
onAddExpense	ExpenseManager	Добавляет новую статью расходов в список расходов
onDeleteExpense	ExpenseManager	Удаляет статью расходов из списка расходов

Продолжайте практиковаться, продолжайте программировать и, самое главное, продолжайте получать удовольствие! React – это путешествие, и вы уже на пути к тому, чтобы стать мастером React. До свидания, счастливого кодинга!

Credits: Image by storyset