- vừa được xem lúc

Xử lý sự kiện trong React: Hướng dẫn dành cho người mới bắt đầu

0 0 2

Người đăng: Vinh Phạm

Theo Viblo Asia

Xử lý các sự kiện như click chuột, gửi biểu mẫu (form), và nhấn phím là một phần cơ bản trong việc xây dựng giao diện người dùng tương tác.

Trong hướng dẫn này, chúng ta sẽ cùng tìm hiểu cách xử lý sự kiện trong React hoạt động như thế nào, điểm khác biệt chính so với JavaScript thuần, và các thực tiễn tốt nhất để giữ cho mã nguồn sạch sẽ và hiệu quả.

Sự kiện trong React là gì?

Trong React, các sự kiện được kích hoạt để phản hồi lại hành động của người dùng—giống như trong JavaScript thuần. Sự khác biệt là gì? React bọc các sự kiện gốc của trình duyệt bằng một hệ thống sự kiện tổng hợp (synthetic event), cung cấp một giao diện đồng nhất trên tất cả các trình duyệt.

Cú pháp xử lý sự kiện cơ bản

Dưới đây là ví dụ về một hàm xử lý click đơn giản trong React:

function MyButton() { function handleClick() { alert('Button was clicked!'); } return <button onClick={handleClick}>Click Me</button>;
}

Trong đó:

  • onClick viết theo kiểu camelCase (khác với onclick trong HTML)
  • Bạn truyền vào một tham chiếu hàm, không phải chuỗi

Các loại sự kiện phổ biến trong React

image.png

Xử lý Input trong Form

function FormExample() { const [name, setName] = useState(""); function handleChange(e) { setName(e.target.value); } return ( <input type="text" value={name} onChange={handleChange} /> );
}

React cung cấp quyền kiểm soát hoàn toàn đối với các phần tử form bằng cách xem chúng là controlled components (thành phần được kiểm soát).

Truyền tham số vào trình xử lý sự kiện

Bạn có thể truyền tham số bằng arrow function:

<button onClick={() => handleClick(id)}>Delete</button>

Hoặc dùng .bind (không khuyến khích trong component dạng hàm):

<button onClick={handleClick.bind(null, id)}>Delete</button>

Synthetic Event vs Native Event

React sử dụng hệ thống sự kiện tổng hợp (synthetic events), có đặc điểm:

  • Hoạt động đồng nhất trên tất cả trình duyệt
  • Gom nhóm sự kiện để tăng hiệu suất (hành vi này đã giảm đi từ React 17+)

Bạn vẫn có thể truy cập sự kiện gốc nếu cần bằng e.nativeEvent.

Best Practices

  • Sử dụng arrow function hoặc viết riêng các hàm xử lý để mã dễ đọc
  • Tránh viết hàm trực tiếp trong JSX trừ khi cần truyền props
  • Nếu gắn listener thủ công (ví dụ window.addEventListener), hãy đảm bảo huỷ chúng đúng cách

Mẹo bổ sung: Sự kiện tuỳ chỉnh trong React

Cần tạo tương tác tuỳ chỉnh giữa các component? Hãy truyền hàm xử lý qua props:

function Parent() { function onChildClick() { console.log("Child clicked"); } return <Child handleClick={onChildClick} />;
} function Child({ handleClick }) { return <button onClick={handleClick}>Click me</button>;
}

Kết luận

Xử lý sự kiện trong React rất đơn giản khi bạn hiểu cú pháp và tư duy phía sau nó. Dù bạn đang quản lý input hay tạo ra các component tương tác nâng cao, hệ thống sự kiện tổng hợp và cách tiếp cận module của React giúp việc xử lý hành động của người dùng trở nên rõ ràng và mạnh mẽ.

Đã sẵn sàng nâng cấp? Hãy thử kết hợp xử lý sự kiện với các hook như useEffect hoặc cập nhật state qua context để xây dựng UI thông minh hơn nữa!

Chúc bạn code vui vẻ!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 407

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.7k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 154

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 154

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 378

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 289