点击计数器

本课属于 Coddy React 学习旅程的“基础知识”单元。第 23 课，共 42 课。

状态需要一个触发条件，通常是一个事件。使用 onClick 将函数绑定到按钮，并在函数中更改状态：

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>
    );
}

沿着循环跟踪一次点击：点击 → setCount(count + 1) → React 重新渲染 → 段落显示新的计数。注意箭头函数：onClick={() => setCount(count + 1)}传入一个稍后调用的函数。写成onClick={setCount(count + 1)}会在渲染时立即调用它，这是一个经典的 bug。

挑战

简单

制作经典的计数器。

添加状态：count，初始值为 0（导入已准备好）。
在带有 id="count" 的 span 中显示当前计数。
让 +1 按钮每次点击时都将计数增加 1。

亲手试试

<!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>