React Events

Giống như các sự kiện của HTML DOM, React có thể thực hiện các hành động dựa trên các sự kiện của người dùng.

React có các sự kiện giống như HTML: click, change, mouseover...

Thêm các sự kiện

Các sự kiện của React được viết bằng cú pháp camelCase, nghĩa là chúng ta sẽ viết là onClick thay cho onclick.

Trong React các hàm/phương thức xử lý sự kiện được viết ở bên trong cặp dấu ngoặc nhọn, nghĩa là chúng ta sẽ viết onClick={shoot}  thay cho onClick="shoot()".

Ví dụ sau là cách viết của React:

Ví dụ sau là cách viết của HTML:

Ví dụ sau sẽ đặt hàm shoot ở bên trong Football component:

Truyền tham số

Để truyền một tham số vào một hàm/phương thức xử lý sự kiện, chúng ta sử dụng một arrow function.

Ví dụ sau sẽ gửi "Goal!" như là một tham số đến hàm shoot, bằng cách sử dụng arrow function:

Đối tượng event của React

Trình xử lý sự kiện có quyền truy cập vào sự kiện React đã kích hoạt hàm.

Trong ví dụ sau của chúng ta sự kiện là sự kiện "click", và Arrow Function sẽ gửi đối tượng event theo cách thủ công:

Điều này sẽ có ích khi chúng ta xem phần Form trong chương sau.