Xử lý sự kiện (Event) trong ReactJS

Tram Ho

Trong bài học mình sẽ hướng dẫn bạn “Làm sao để sử dụng Event (sự kiện) trong ReactJS”. Cũng không có nhiều khác biệt khi bạn sử dụng các event trong ReactJS so với sử dụng các event trong Javascript.

    1. Trong Javascript bạn sẽ xử lý sự kiện trong một hàm, còn trong React bạn sẽ xử lý sự kiện trong một phương thức của Component.

ReactJS Events

React là một thư viện dựa trên Javascript, về cơ bản không có nhiều khác biệt trong cách xử lý sự kiện giữa ReactJS và Javascript. Với Javascript, khi sự kiện xẩy ra một hàm sẽ được gọi để thực thi. Nhưng với React, khi sự kiện xẩy ra, sẽ có một phương thức của Component được gọi.

OK, trước hết hãy xem một ví dụ đơn giản:

File onClick-example.jsx

File onClick-example.html

Kết quả:

Arrow Function

Với cú pháp Javascript ES6 bạn có thể tạo một arrow function (Hàm mũi tên), rất ngắn gọn và dễ hiểu:

onClick, onChange,..

onClick phải gọi đến một hàm Javascript, nó không thể gọi trực tiếp đến một phương thức của Component. Vì vậy onClick nên gọi đến một hàm nặc danh (anonymous), và bên trong hàm nặc danh này bạn có thể gọi đến phương thức của Component:

Arrow function với tham số event:

Với Javascript ES6 bạn cũng có thể gọi đến phương thức của Component theo cách sau:

File onClick-example3.jsx

Hoặc:

Cảm ơn các bạn đã đọc! (bow)

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo