מונה לחיצות

חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 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)} תפעיל אותה מיד בזמן הרינדור — באג קלאסי.

אתגר

קל

בנו את המונה הקלאסי.

הוסיפו מצב: count שמתחיל ב-0 (הייבוא מוכן).
הציגו את הספירה הנוכחית בתוך ה-span עם id="count".
גרמו לכפתור +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>