ReactJS - Quản lý Sự kiện

Xin chào các bạn future React developers! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của quản lý sự kiện trong ReactJS. Là người thầy môn khoa học máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong hành trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ những基础知识 và dần nâng cao. Vậy, hãy cầm một tách cà phê (hoặc trà, nếu bạn thích), và cùng bắt đầu nhé!

Quản lý Sự kiện trong ReactJS

Các sự kiện là máu của các ứng dụng web tương tác. Chúng giống như các nút bấm và cần gạt trong buồng lái của một con tàu không gian - chúng làm cho mọi thứ xảy ra! Trong ReactJS, quản lý sự kiện là cách chúng ta xử lý các tương tác của người dùng như nhấp chuột, nhấn phím và gửi biểu mẫu.

Hãy tưởng tượng bạn đang xây dựng một trò chơi nhấp chuột đơn giản. Mỗi lần người dùng nhấp vào một nút, bạn muốn tăng một điểm số. Đó là lúc quản lý sự kiện phát huy tác dụng!

Sự kiện Synthetical trong React

Trước khi chúng ta nhảy vào mã, hãy nói về điều đặc biệt trong React: Sự kiện Synthetical. Đây là cách React đảm bảo rằng các sự kiện hoạt động nhất quán trên các trình duyệt khác nhau. Nó giống như có một bộ dịch phổ thông cho ứng dụng của bạn!

React bao bọc các sự kiện gốc của trình duyệt và cung cấp cho chúng một giao diện nhất quán. Điều này có nghĩa là bạn không cần phải lo lắng về các đặc điểm riêng của từng trình duyệt khi xử lý sự kiện.

Thêm một Sự kiện

Hãy bắt đầu với một ví dụ đơn giản. Chúng ta sẽ tạo một nút khi được nhấp sẽ hiển thị một thông báo.

function AlertButton() {
return (
<button onClick={() => alert('Bạn đã nhấp vào tôi!')}>
Nhấp vào tôi!
</button>
);
}

Trong ví dụ này:

• Chúng ta định nghĩa một thành phần hàm叫做 AlertButton.
• Trong thành phần, chúng ta trả về một phần tử <button>.
• Chúng ta thêm thuộc tính onClick vào nút. Đây là cách chúng ta gắn một bộ监听器 trong React.
• Thuộc tính onClick được đặt là một hàm mũi tên gọi alert() với thông báo của chúng ta.

Khi bạn hiển thị thành phần này và nhấp vào nút, bạn sẽ thấy một thông báo弹出 nói "Bạn đã nhấp vào tôi!".

Xử lý một Sự kiện

Bây giờ, hãy làm cho mọi thứ thú vị hơn một chút. Thay vì chỉ hiển thị một thông báo, chúng ta sẽ cập nhật trạng thái của thành phần khi nút được nhấp.

import React, { useState } from 'react';

function ClickCounter() {
const [count, setCount] = useState(0);

const handleClick = () => {
setCount(count + 1);
};

return (
<div>
<p>Bạn đã nhấp {count} lần</p>
<button onClick={handleClick}>
Nhấp vào tôi!
</button>
</div>
);
}

Hãy phân tích điều này:

1. Chúng ta nhập useState từ React để quản lý trạng thái của thành phần.
2. Chúng ta định nghĩa một thành phần hàm叫做 ClickCounter.
3. Trong thành phần, chúng ta sử dụng useState(0) để tạo một biến trạng thái count được khởi tạo là 0, và một hàm setCount để cập nhật nó.
4. Chúng ta định nghĩa một hàm handleClick gọi setCount để tăng giá trị của count.
5. Trong JSX của chúng ta, chúng ta hiển thị số lần nhấp hiện tại và một nút.
6. Thuộc tính onClick của nút được đặt là hàm handleClick.

Mỗi lần bạn nhấp vào nút, số lần nhấp sẽ tăng lên 1!

Truyền đối số cho Bộ xử lý Sự kiện

Đôi khi, bạn có thể muốn truyền thêm thông tin cho bộ xử lý sự kiện của bạn. Hãy xem một ví dụ nơi chúng ta có nhiều nút, mỗi nút liên kết với một loại quả khác nhau.

import React, { useState } from 'react';

function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('');

const handleFruitClick = (fruit) => {
setSelectedFruit(fruit);
};

return (
<div>
<h2>Chọn một loại quả:</h2>
<button onClick={() => handleFruitClick('Táo')}>Táo</button>
<button onClick={() => handleFruitClick('Chuối')}>Chuối</button>
<button onClick={() => handleFruitClick('Cherry')}>Cherry</button>
<p>Bạn đã chọn: {selectedFruit}</p>
</div>
);
}

Trong ví dụ này:

1. Chúng ta tạo một biến trạng thái selectedFruit để theo dõi loại quả được chọn.
2. Hàm handleFruitClick nhận một tham số fruit.
3. Trong mỗi nút onClick thuộc tính, chúng ta sử dụng một hàm mũi tên để gọi handleFruitClick với tên quả tương ứng.

Khi bạn nhấp vào một nút, nó sẽ cập nhật trạng thái selectedFruit với tên của loại quả bạn đã nhấp.

Các Sự kiện Thường gặp trong React

Dưới đây là bảng một số sự kiện thường gặp bạn có thể sử dụng:

Tên Sự kiện	Mô tả
onClick	Khi một phần tử được nhấp
onChange	Khi giá trị của một phần tử đầu vào thay đổi
onSubmit	Khi một biểu mẫu được gửi
onMouseEnter	Khi con trỏ chuột vào một phần tử
onMouseLeave	Khi con trỏ chuột rời khỏi một phần tử
onKeyDown	Khi một phím được nhấn xuống
onKeyUp	Khi một phím được释 放
onFocus	Khi một phần tử nhận được focus
onBlur	Khi một phần tử mất focus

Nhớ rằng, các sự kiện này được viết theo cách camelCase trong React, khác với các đối tác HTML viết theo cách lowercase.

Và đó là tất cả, các bạn! Bạn đã刚刚迈出进入React事件管理世界的第一步。 Hãy thực hành với các ví dụ này, thử kết hợp các khái niệm khác nhau, và sớm bạn sẽ tạo ra các ứng dụng React tương tác như một chuyên gia!

Nhớ rằng, trong lập trình, cũng như trong cuộc sống, chìa khóa là tiếp tục thử nghiệm và học hỏi. Đừng sợ mắc lỗi - chúng chỉ là những bậc thang dẫn đến thành công. Chúc các bạn may mắn và React luôn ở cùng bạn!

Credits: Image by storyset