Khi xây dựng các ứng dụng web tương tác, việc xử lý sự kiện (event handling) là điều không thể thiếu. Trong React – thư viện JavaScript phổ biến để xây dựng giao diện người dùng, xử lý sự kiện được thực hiện theo một cách rõ ràng, dễ hiểu, và linh hoạt.
1. Event là gì?
Trong bối cảnh lập trình web, "event" là những tương tác của người dùng với trình duyệt, ví dụ:
- Click chuột
- Gõ phím
- Di chuyển chuột
- Gửi form
- Thay đổi nội dung input
React cung cấp hệ thống event riêng tên là SyntheticEvent – một lớp bao bọc event gốc của trình duyệt giúp đảm bảo sự tương thích giữa các trình duyệt khác nhau.
2. Cách viết sự kiện trong React
🔸 So sánh HTML và React:
HTML truyền thống:
<button onclick="handleClick()">Click me</button>
React JSX:
<button onClick={handleClick}>Click me</button>
🔹 Điểm cần lưu ý:
- Tên sự kiện trong React viết camelCase:
onClick,onChange,onSubmit,... - Không truyền chuỗi, mà truyền hàm thực thi:
{handleClick}thay vì"handleClick()"
3. Ví dụ cơ bản
import React from 'react'; function ClickExample() { const handleClick = () => { alert("Bạn vừa click!"); }; return <button onClick={handleClick}>Click me</button>;
}
4. Truyền tham số vào event handler
React không cho phép bạn truyền tham số trực tiếp vào onClick={handleClick(param)} vì điều đó sẽ thực thi ngay lập tức. Thay vào đó, dùng arrow function:
<button onClick={() => handleClick('React Rocks!')}> Click me
</button>
const handleClick = (msg) => { alert(msg);
};
5. Xử lý form với onChange & onSubmit
import React, { useState } from 'react'; function NameForm() { const [name, setName] = useState(''); const handleChange = (e) => setName(e.target.value); const handleSubmit = (e) => { e.preventDefault(); alert(`Xin chào, ${name}`); }; return ( <form onSubmit={handleSubmit}> <input type="text" value={name} onChange={handleChange} /> <button type="submit">Gửi</button> </form> );
}
6. Các loại event phổ biến trong React
| Sự kiện | Ý nghĩa |
|---|---|
onClick |
Khi người dùng click |
onChange |
Khi input, select thay đổi |
onSubmit |
Khi form được submit |
onKeyDown |
Khi người dùng nhấn phím |
onMouseEnter |
Khi chuột đi vào phần tử |
onFocus |
Khi input được focus |
onBlur |
Khi input bị mất focus |
7. So sánh với JavaScript thuần
JavaScript truyền thống:
<button id="btn">Click me</button> <script> document.getElementById("btn").addEventListener("click", () => { alert("Clicked!"); });
</script>
React JSX:
<button onClick={() => alert("Clicked!")}>Click me</button>
✅️ Ưu điểm của React:
- Gọn gàng
- Không cần thao tác với DOM
- Dễ bảo trì, mở rộng
- Hoạt động thống nhất qua các trình duyệt
🔚 Kết luận
Hiểu và sử dụng đúng Event Handling trong React là kỹ năng cơ bản nhưng rất quan trọng để xây dựng các ứng dụng web tương tác tốt. Việc xử lý sự kiện trong React đơn giản hơn, rõ ràng hơn nhờ cú pháp JSX và sự hỗ trợ của SyntheticEvent. Khi bạn đã làm chủ kỹ thuật này, bạn sẽ dễ dàng tạo ra những trải nghiệm người dùng mượt mà, phản hồi nhanh chóng.