Bộ đếm lượt nhấp

Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 23 trên 42.

State cần một tác nhân kích hoạt, thường là một sự kiện. Gắn một hàm với nút bằng onClick rồi thay đổi state bên trong hàm đó:

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Hãy theo dõi một lần nhấp qua vòng lặp: nhấp → setCount(count + 1) → React kết xuất lại → đoạn văn hiển thị số đếm mới. Lưu ý hàm mũi tên: onClick={() => setCount(count + 1)} truyền một hàm để gọi sau đó. Viết onClick={setCount(count + 1)} sẽ gọi hàm ngay khi kết xuất, đây là một bug kinh điển.

Thử thách

Dễ

Tạo bộ đếm kinh điển.

Thêm state: count bắt đầu từ 0 (import đã sẵn sàng).
Hiển thị số đếm hiện tại bên trong span có id="count".
Để nút +1 tăng số đếm thêm 1 sau mỗi lần nhấp.

Tự làm thử

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>