Giới thiệu các sự kiện trong ứng dụng Quản lý chi tiêu

Xin chào các bạnfuture React developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới đầyExciting của các sự kiện trong ứng dụng Quản lý chi tiêu của chúng ta. Đừng lo lắng nếu bạn là người mới bắt đầu lập trình - Tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn của một giáo viên mẫu giáo giải thích tại sao bầu trời lại xanh. Nào, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng nhau bắt đầu hành trình lập mã này nhé!

什么是React中的事件?

Trước khi chúng ta nhảy vào mã, hãy hiểu xem sự kiện là gì. Hãy tưởng tượng bạn đang tham gia một buổi tiệc (tất nhiên là buổi tiệc React), và mỗi lần bạn chạm vai ai đó, họ lại có phản ứng. Đó chính là bản chất của sự kiện trong React - chúng là các hành động kích hoạt các phản hồi trong ứng dụng của bạn.

Trong ứng dụng Quản lý chi tiêu của chúng ta, chúng ta sẽ sử dụng sự kiện để làm cho ứng dụng trở nên tương tác và nhạy cảm với các hành động của người dùng. Ví dụ, khi người dùng nhấp vào nút để thêm một chi tiêu mới, đó là sự kiện mà chúng ta cần xử lý.

Xử lý các sự kiện trong ứng dụng Quản lý chi tiêu

Bây giờ, hãy c rolled up our sleeves và thêm một chút tương tác vào ứng dụng Quản lý chi tiêu của chúng ta. Chúng ta sẽ bắt đầu với một ví dụ đơn giản và dần dần xây dựng lên các tương tác phức tạp hơn.

1. Thêm nút "Thêm chi tiêu"

Đầu tiên, hãy thêm một nút mà người dùng có thể nhấp để thêm một chi tiêu mới. Chúng ta sẽ tạo một thành phần mới gọi là AddExpenseButton.

import React from 'react';

const AddExpenseButton = () => {
const handleClick = () => {
console.log('Nút Thêm chi tiêu được nhấp!');
};

return (
<button onClick={handleClick}>Thêm chi tiêu</button>
);
};

export default AddExpenseButton;

Hãy phân tích này:

• Chúng ta nhập React (luôn cần thiết cho JSX).
• Chúng ta xác định một thành phần hàm叫做 AddExpenseButton.
• Trong thành phần, chúng ta xác định một hàm叫做 handleClick. Hiện tại, nó chỉ ghi một tin nhắn vào console.
• Trong câu lệnh return, chúng ta渲染 một nút với thuộc tính onClick. Thuộc tính này là cách chúng ta gắn bộ xử lý sự kiện vào nút.

Bây giờ, mỗi lần nút được nhấp, 'Nút Thêm chi tiêu được nhấp!' sẽ được ghi vào console. Điều này giống như dạy ứng dụng của bạn nói - mỗi lần nhấp là một từ nó học được!

2. Tạo biểu mẫu chi tiêu

Tiếp theo, hãy tạo một biểu mẫu nơi người dùng có thể nhập chi tiết chi tiêu của họ. Chúng ta sẽ gọi thành phần này là 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('Biểu mẫu được gửi:', { title, amount, date });
// Ở đây bạn thường sẽ gửi dữ liệu này đến thành phần cha hoặc API
};

return (
<form onSubmit={handleSubmit}>
<input type="text" value={title} onChange={handleTitleChange} placeholder="Tiêu đề chi tiêu" />
<input type="number" value={amount} onChange={handleAmountChange} placeholder="Số tiền" />
<input type="date" value={date} onChange={handleDateChange} />
<button type="submit">Thêm chi tiêu</button>
</form>
);
};

export default ExpenseForm;

Wow, đó là rất nhiều thông tin để tiếp thu! Hãy phân tích từng bước:

1. Chúng ta nhập useState từ React để quản lý trạng thái biểu mẫu của chúng ta.
2. Chúng ta tạo các biến trạng thái cho title, amount, và date sử dụng hook useState.
3. Chúng ta xác định các hàm xử lý cho mỗi trường đầu vào. Các hàm này cập nhật trạng thái khi người dùng gõ.
4. Chúng ta tạo một hàm handleSubmit rằng ngăn chặn hành vi mặc định của biểu mẫu và ghi dữ liệu biểu mẫu.
5. Trong JSX, chúng ta tạo một biểu mẫu với các trường đầu vào cho tiêu đề, số tiền và ngày. Mỗi đầu vào có một thuộc tính value (được kiểm soát bởi trạng thái) và một thuộc tính onChange (điểm đến hàm xử lý của nó).
6. Biểu mẫu có một thuộc tính onSubmit điểm đến hàm handleSubmit.

Biểu mẫu này giống như một thư ký được huấn luyện tốt - nó lắng nghe cẩn thận mọi điều bạn nói và nhớ tất cả!

3. Lifting State Up

Bây giờ, giả sử chúng ta muốn thêm chi tiêu mới vào danh sách chi tiêu. Chúng ta cần nâng trạng thái lên thành phần cha. Hãy tạo một thành phần 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;

Và hãy chỉnh sửa ExpenseForm để sử dụng thuộc tính onAddExpense:

import React, { useState } from 'react';

const ExpenseForm = ({ onAddExpense }) => {
// ... các định nghĩa trạng thái và bộ xử lý trước đó ...

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

// ... phần còn lại của thành phần ...
};

export default ExpenseForm;

Bây giờ, khi biểu mẫu được gửi, nó gọi hàm onAddExpense được truyền từ thành phần cha, thêm chi tiêu mới vào danh sách. Điều này giống như một gia đình làm việc cùng nhau - con (ExpenseForm)告诉 cha (ExpenseManager) về chi tiêu mới, và cha nhớ nó cho mọi người!

4. Thêm chức năng xóa

Cuối cùng, hãy thêm khả năng xóa chi tiêu. Chúng ta sẽ chỉnh sửa thành phần 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)}>Xóa</button>
</li>
))}
</ul>
);
};

export default ExpenseList;

Và cập nhật 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;

Bây giờ chúng ta có một ứng dụng Quản lý chi tiêu hoàn chỉnh với khả năng thêm và xóa!

Kết luận

Chúc mừng! Bạn đã vừa xây dựng một ứng dụng Quản lý chi tiêu phản hồi. Bạn đã học cách xử lý sự kiện, quản lý trạng thái và truyền dữ liệu giữa các thành phần. Nhớ rằng, học React giống như học骑自行车 - ban đầu có thể trông不稳定, nhưng với sự luyện tập, bạn sẽ nhanh chóng đi xe một cách mượt mà!

Dưới đây là bảng tóm tắt các bộ xử lý sự kiện chúng ta đã sử dụng:

Bộ xử lý sự kiện	Thành phần	Mục đích
handleClick	AddExpenseButton	Ghi một tin nhắn khi nút được nhấp
handleTitleChange	ExpenseForm	Cập nhật trạng thái tiêu đề khi đầu vào thay đổi
handleAmountChange	ExpenseForm	Cập nhật trạng thái số tiền khi đầu vào thay đổi
handleDateChange	ExpenseForm	Cập nhật trạng thái ngày khi đầu vào thay đổi
handleSubmit	ExpenseForm	Ngăn chặn gửi biểu mẫu mặc định và thêm chi tiêu mới
onAddExpense	ExpenseManager	Thêm chi tiêu mới vào danh sách chi tiêu
onDeleteExpense	ExpenseManager	Xóa chi tiêu khỏi danh sách chi tiêu

Tiếp tục luyện tập, tiếp tục lập mã, và quan trọng nhất, hãy luôn vui vẻ! React là một hành trình, và bạn đang trên đường trở thành một master React. Hẹn gặp lại lần sau, chúc bạn lập mã vui vẻ!

Credits: Image by storyset