כפתור ניקוי
חלק מהיחידה יסודות במסלול ה-React של Coddy. שיעור 31 מתוך 42.
הנה כוח-העל של קלט מבוקר: מכיוון שהמצב הוא הבעלים של הטקסט, הקוד שלך יכול לשנות את התיבה, ולא רק המשתמש. אפשר לאפס אותה מכל מקום:
<button onClick={() => setName('')}>Clear</button>מגדירים את המצב כמחרוזת ריקה, והתיבה מתרוקנת בעצמה ברינדור הבא, כי value={name} מציג תמיד את המצב. עם קלט לא מבוקר היית צריך לגשת ל-DOM ידנית; עם מצב, מספיק לקרוא לפונקציית עדכון אחת.
אתגר
בינוניהשלימו את מחבר ההודעות.
- הפכו את שדה הקלט (
id="message") למבוקר באמצעות המצבmessage. - הציגו את הטיוטה בפסקה (
id="draft"): הטקסטDraft:ואחריו ההודעה. - הכפתור
id="clear"מרוקן את ההודעה.
נסו בעצמכם
<!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: הפעלה וכיבוי של מעקב