Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Click Event Và State Hook Trong React

Click Event Và State Hook Trong React


Ngày 2 Tháng 9 Năm 2021

Trong bài viết hôm nay chúng ta sẽ đi vào tìm hiểu Click Evenet và State Hook là gì? Và cách áp dụng nó trong dự án Reactjs nha.

Trước khi đi vào bài viết thì bạn nên học xong phần 1 đã nhé!

Cách Tạo Click Event Trong React

Bây giờ chúng ta sẽ đi vào tìm hiểu cách thiết lập sự kiện click event nha. Đầu tiên chúng ta sẽ tạo một button ở trong file App.js.

Tạo Button Trong App JS

Tiếp theo chúng ta sẽ tạo một hàm để hiển thị nội dung với tên là clickEvent.

Create Function Click Event

Bây giờ chúng ta sẽ đi vào thiết lập liên kết giữa hàm clickEvent với button component bằng cách dùng thuộc tính onClick nha!

Link function with buttton

Và dưới là video kết quả nhé!

Tiếp theo chúng ta sẽ đi vào cách sử dụng tham số cho hàm clickEvent. Trong JSX thì chúng ta sẽ không thể sử dụng cách thêm tham số cho hàm như trong Javascript là:

onclick = {clickEvent(name)}

Khi bạn thêm tham số vào hàm như cách trên thì clickEvent sẽ xảy ra lỗi là hàm tự động được gọi mà người dùng không cần phải click vào button. Để hiểu rõ hơn bạn xem video sau nhé!

Vậy để tránh tình trạng trên thì mình sẽ sử dụng cách là sử dụng hàm anonymous functions để gọi clickEvent nha.

onclick = {() =>clickEvent(name)}

Và kết quả bạn xem video bên dưới nha.

Sử Dụng State Hook Trong Reactjs

Đây được xem là một tính năng đặc biệt quan trọng trong quá trình học React. Nó sẽ giúp chúng ta có thể thay đổi giá trị trong component. Và để giúp bạn dễ hình dung thì trong phần này mình sẽ đi vào thay đổi nội dung của website khi người dùng click vào button nhé!

Bước đầu tiên để sử dụng state trong React thì bạn cần phải import nó thông qua đoạn mã như sau:

Import State

Bước tiếp theo mình sẽ khai báo biến lưu trữ giá trị bằng state thông qua đoạn mã sau nhé!

Use State

Như bạn thấy thì state ở trên sẽ có hai giá trị là:

  • name: Là nơi lưu trữ giá trị mặc định ('Hello World').
  • setName: là function giúp bạn có thể thay đổi giá trị cho biến name.

Bây giờ chúng ta sẽ xem kết quả nha.

Result Of Use State

Phần tiếp theo chúng ta sẽ đi vào sử dụng State để thay đổi nội dung của thẻ p khi người dùng click vào button nhé.

Set Name In React

Mỗi lần chúng ta click vào button thì React sẽ tự động render lại component với giá trị mới. Để hiểu rõ hơn bạn xem video sau nhé.

Hiển Thị Danh Sách Bằng State

Trong phần này chúng ta sẽ đi vào tìm hiểu cách lấy dữ liệu từ danh sách và hiển thị chúng trong react app nha. Đầu tiên mình sẽ tạo một file tên là home.js ở trong thư mục component.

Create Home JS

Tiếp theo mình sẽ import State và thêm dữ liệu vào cho dự án thông qua đoạn mã sau nha:

Create Home JS

Để bạn khỏi phải mất công nhập lại dữ liệu thì mình để đoạn mã đó ở dưới đây nha.

 { title: 'Niem Vui Lap Trinh 1', body: 'lorem ipsum...', author: 'developer', id: 1 },
{ title: 'Niem Vui Lap Trinh 2', body: 'lorem ipsum...', author: 'coder', id: 2 },
{ title: 'Niem Vui Lap Trinh 3', body: 'lorem ipsum...', author: 'developer', id: 3 }

Bây giờ chúng ta sẽ lấy dữ liệu trong danh sách bằng cách sử dụng map() . Nó sẽ giúp bạn lọc qua từng phần tử trong mảng và lấy các thuộc tính mà mình cần. Và sau đó sẽ hiển thị chúng ra ngoài màn hình thông qua đoạn code sau:

Use map for array

Thuộc tính key giúp react xác định phần tử nào được chèn vào, phần tử nào bị xóa hay phần tử nào được cập nhật trong mỗi lần render. Tiếp theo chúng ta sẽ import Home Component vào file chính App.js để hiển thị danh sách nha.

Phần cuối cùng chúng ta sẽ thiết lập một số thuộc tính CSS cho Home component bằng file index.css nhé.

Add CSS Home Component

Và kết quả bạn xem hình ảnh bên dưới nha.

Result Home Component

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn kiến thức về click event và cách sử dụng State Hook trong React. Nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!