שינוי מצב באמצעות State
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 25 מתוך 42.
מצב אינו רק מספרים. מצב בוליאני הוא המתג הסטנדרטי להצגה ולהסתרה של דברים:
const [isOpen, setIsOpen] = useState(false);
<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen ? <p>I am visible!</p> : null}שני טריקים שפועלים יחד:
setIsOpen(!isOpen):!הופך את הערך הבוליאני, כך שכפתור אחד גם פותח וגם סוגר{condition ? jsx : null}: הצגה שלnullמציגה כלום; האלמנט לא מוסתר, הוא לא קיים
אתגר
בינוניבנו חשיפה של ספוילר.
- הוסיפו מצב בוליאני
revealed, שמתחיל ב-false. - הכפתור (
id="toggle") הופך את ערכו בכל לחיצה. - כשהספוילר נחשף, הציגו
<p>עםid="secret"והטקסטThe cake is real; אחרת הציגוnull.
נסו בעצמכם
<!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>
בחנו את עצמכםהשיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה יסודות
2ביטויי JSX
סוגריים מסולסליםחשבון בסוגריים מסולסליםסוגריים מסולסלים במאפייניםקריאה לפונקציות ב-JSXסיכום: ביטויי JSX5מצב ואירועים
מהו מצב?מונה לחיצותסופרים בקפיצותשינוי מצב באמצעות Stateמצבים בלתי תלוייםסיכום: מצב ואירועים8פרויקט: כרטיס פרופיל
שלב 1: מבנה הכרטיסשלב 2: כרטיס עם Propsשלב 3: כפתור לייקשלב 4: הפעלה וכיבוי של מעקב