Giới thiệu

Trong bài viết này, chúng ta sẽ tìm hiểu về useState, một Hook cơ bản trong ReactJS. Hook là một tính năng mới được thêm vào trong phiên bản React 16.8, cho phép chúng ta sử dụng state và các tính năng khác của React mà không cần đến class.

Khái niệm về useState

useState là một Hook cho phép chúng ta thêm React state vào function components. Khi chúng ta gọi useState, nó trả về một cặp giá trị: giá trị state hiện tại và một function cho phép chúng ta cập nhật nó.

Cú pháp

Cú pháp của useState như sau:

const [state, setState] = useState(initialState);

Trong đó:

• state là giá trị state hiện tại.
• setState là một function cho phép chúng ta cập nhật state.
• initialState là giá trị khởi tạo cho state.

Ví dụ

Dưới đây là một ví dụ về cách sử dụng useState:

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Trong ví dụ trên, chúng ta khởi tạo count với giá trị là 0. Khi người dùng nhấn vào nút "Click me", chúng ta sẽ gọi setCount để tăng giá trị của count lên 1.

Bdài tập

Tạo một ứng dụng đơn giản với một nút và một số đếm. Khi nút được nhấn, số đếm sẽ tăng lên.

Bài giải

Bước 1: Tạo một function component

Đầu tiên, chúng ta sẽ tạo một function component đơn giản. Trong ví dụ này, chúng ta sẽ gọi nó là Counter.

function Counter() {
  return (
    <div>
      <p>Count: 0</p>
      <button>Click me</button>
    </div>
  );
}

export default Counter;

Bước 2: Thêm useState

Tiếp theo, chúng ta sẽ thêm useState vào component. Đầu tiên, bạn cần import Hook từ React.

import React, { useState } from 'react';

Sau đó, bạn có thể khởi tạo trạng thái bằng cách sử dụng Hook useState. Trong ví dụ này, chúng ta sẽ khởi tạo trạng thái count với giá trị ban đầu là 0.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button>Click me</button>
    </div>
  );
}

Bước 3: Cập nhật trạng thái

Cuối cùng, chúng ta sẽ cập nhật trạng thái khi nút được nhấn. Để làm điều này, chúng ta sẽ thêm một hàm xử lý sự kiện onClick vào nút.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Với mỗi lần nhấn nút, hàm setCount sẽ được gọi, và giá trị của count sẽ tăng lên 1.

Vậy là bạn đã hoàn thành bài tập! Bạn đã học cách sử dụng useState để thêm trạng thái vào function component trong ReactJS.