React.js 08 – Xử lý sự kiện trong React.js

0
256

React cung cấp một cách dễ dàng để chúng ta có thể quản lý các sự kiện.

Nếu bạn đã sử dụng Javascript , thì đây cũng giống như các trình xử lý sự kiện Javascript cũ, ngoại trừ ở đây bạn sẽ xác định mọi thứ bằng Javascript, không phải HTML.

Tên sự kiện trong React sẽ hợi khác một chút vì bạn sẽ phải sử dụng camelCase cho mọi tên sự kiện, do đó onclick trở thành onClick, onsubmit trơ thành onSubmit .v..v

Gán sự kiện

Để gán sự kiện cho một component nào đó trong React chúng ta sử dụng cú pháp sau.

Ví dụ gán sự kiện click cho button.

Xử lý sự kiện

Sau khi đã gán sự kiện thì chúng ta sẽ cần một phương thức để xử lý sự kiện đó.

Dưới đây là ví dụ khai báo function xử lý sự kiện ở trong Component class.

Tất cả các trình xử lý đều nhận được một đối tượng event.

Ràng buộc this trong các phương thức

Đừng quên liên kết các phương thức. Các phương thức của các class ES6 theo mặc định là không bị ràng buộc. Điều này có nghĩa là thiskhông được xác định trừ khi bạn xác định các phương thức là các arrow function.

Với ví dụ ở phần Xử lý sự kiện nếu bạn muốn sử dụng this ở trong hàm xử lý sự kiện mà không sử dụng arrow function thì bạn cần liên kết thủ công ở trong constructor.

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây