Sự kiện đóng vai trò quan trọng trong việc tạo ra giao diện người dùng tương tác và động trong React. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách xử lý sự kiện trong React và phản ứng đáp hiệu quả với hành động của người dùng.
Xử lý sự kiện trong JSX
React cung cấp một hệ thống sự kiện tổng hợp (synthetic event) để bao bọc các sự kiện trình duyệt cơ bản và chuẩn hóa chúng trên các trình duyệt khác nhau. Chúng ta có thể gắn các trình xử lý sự kiện trực tiếp vào các phần tử JSX bằng thuộc tính onEventName
.
Ví dụ:
Trình xử lý sự kiện và đối tượng sự kiện
Khi một sự kiện được kích hoạt, React tự động truyền một đối tượng sự kiện tới hàm trình xử lý sự kiện. Chúng ta có thể truy cập vào đối tượng này để lấy thêm thông tin về sự kiện, như phần tử mục tiêu, tọa độ chuột, v.v.
Ví dụ:
Ràng buộc trình xử lý sự kiện
Khi truyền các trình xử lý sự kiện làm thuộc tính, cần ràng buộc chúng với phiên bản của thành phần để đảm bảo ngữ cảnh this
đúng khi sự kiện được kích hoạt.
Ví dụ:
Truyền sự kiện và ngăn chặn hành động mặc định
React sử dụng hệ thống sự kiện tổng hợp để tự động xử lý sự kiện truyền đi. Để ngăn chặn hành vi mặc định của trình duyệt, chẳng hạn như gửi biểu mẫu hoặc điều hướng liên kết, chúng ta có thể gọi phương thức event.preventDefault()
.
Ví dụ:
Thông qua việc hiểu cách xử lý sự kiện trong React, bạn có thể tạo ra giao diện người dùng tương tác và đáp ứng một cách linh hoạt đối với hành động của người dùng.
Dưới đây là danh sách một số sự kiện phổ biến trong React
1. onClick
: Sự kiện xảy ra khi một phần tử được nhấn bấm.
Ví dụ:
2. onChange
: Sự kiện xảy ra khi giá trị của một phần tử nhập liệu (input, select, textarea) thay đổi.
Ví dụ:
3. onSubmit
: Sự kiện xảy ra khi một biểu mẫu (form) được gửi đi.
Ví dụ:
4. onMouseEnter
: Sự kiện xảy ra khi con trỏ chuột di chuyển vào phần tử.
Ví dụ:
5. onMouseLeave
: Sự kiện xảy ra khi con trỏ chuột di chuyển ra khỏi phần tử.
Ví dụ:
6. onKeyDown
: Sự kiện xảy ra khi một phím được nhấn xuống.
Ví dụ:
7. onKeyUp
: Sự kiện xảy ra khi một phím được nhả ra.
Ví dụ:
8. onFocus
: Sự kiện xảy ra khi một phần tử nhận focus (được chọn).
Ví dụ:
9. onBlur
: Sự kiện xảy ra khi một phần tử mất focus.
Ví dụ:
10. onScroll
: Sự kiện xảy ra khi một phần tử được cuộn.
Ví dụ:
Đây là chỉ một số ví dụ về các sự kiện phổ biến trong React. Bạn có thể sử dụng các sự kiện này hoặc tạo các sự kiện tùy chỉnh phù hợp với nhu cầu của bạn trong ứng dụng React của mình.