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ụ:
function handleClick() {
console.log("Đã nhấp vào nút!");
}
<button onClick={handleClick}>Nhấp vào</button>
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ụ:
function handleMouseOver(event) {
console.log("Tọa độ chuột:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Di chuột qua đây</div>
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ụ:
class MyComponent extends React.Component {
handleClick() {
console.log("Đã nhấp vào nút!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Nhấp vào</button>;
}
}
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ụ:
function handleSubmit(event) {
event.preventDefault();
console.log("Đã gửi biểu mẫu!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Gửi</button>
</form>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ụ:
<button onClick={handleClick}>Nhấn vào đây</button>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ụ:
<input type="text" onChange={handleChange} />3. onSubmit: Sự kiện xảy ra khi một biểu mẫu (form) được gửi đi.
Ví dụ:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Gửi</button>
</form>4. onMouseEnter: Sự kiện xảy ra khi con trỏ chuột di chuyển vào phần tử.
Ví dụ:
<div onMouseEnter={handleMouseEnter}>Di chuột vào đây</div>5. onMouseLeave: Sự kiện xảy ra khi con trỏ chuột di chuyển ra khỏi phần tử.
Ví dụ:
<div onMouseLeave={handleMouseLeave}>Di chuột ra khỏi đây</div>6. onKeyDown: Sự kiện xảy ra khi một phím được nhấn xuống.
Ví dụ:
<input type="text" onKeyDown={handleKeyDown} />7. onKeyUp: Sự kiện xảy ra khi một phím được nhả ra.
Ví dụ:
<input type="text" onKeyUp={handleKeyUp} />8. onFocus: Sự kiện xảy ra khi một phần tử nhận focus (được chọn).
Ví dụ:
<input type="text" onFocus={handleFocus} />9. onBlur: Sự kiện xảy ra khi một phần tử mất focus.
Ví dụ:
<input type="text" onBlur={handleBlur} />10. onScroll: Sự kiện xảy ra khi một phần tử được cuộn.
Ví dụ:
<div onScroll={handleScroll}>Nội dung cuộn</div>
Đâ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.