קורס React 2020 שיעור תרגול: גישה ישירה ל DOM

[ynonp]

הי

1. הייתי ממליץ להשתמש באירוע submit של הטופס במקום ב onClick של הכפתור

2. נדמה לי שגם name צריך להישמר בסטייט כדי שאפשר יהיה להשתמש בו

3. הנקודה הכי חשובה - אנחנו (משתמשים) לא אוהבים הודעות שגיאה שמוצגות עם alert. הרבה יותר טוב יהיה להציג קטע של “שגיאות” בראש הטופס שמפרט מה היה לא בסדר, ומתחת לשדה הסיסמה לכתוב את השגיאה הספציפית של השדה. נסי לחשוב איך לממש התנהגות כזאת, מה צריך להישמר בסטייט וכו’.

לגבי ריענון הטופס - בדרך כלל כשאת מגישה טופס את תגישי אותו לאיזשהו צד שרת. אותו צד שרת יצטרך להגיד שהנתונים לא וולידיים ויחזיר לך את הנתונים שהקלדת. בשביל לטפל בריענון בצד לקוח בלבד אפשר לשמור את המידע שמשתמש הקליד ב local storage ואז לטעון משם כשהטופס עולה. אפשר ללמוד על local storage מהשיעור עליו כאן:
https://www.tocode.co.il/bundles/frontend/lessons/localstorage

שווה בשביל המשחק גם לנסות לממש התנהגות כמו שתיארת.

[racheli9467]

זה הקוד שלי לתרגיל 1 אשמח לעזרה :

import React from "react";
import { useRef } from "react";
import { useState } from "react";
export default function Focus(props) {
    const divRefs = [useRef(null), useRef(null), useRef(null), useRef(null)];
    const [onfocus, setonfocus] = useState(0);
    function componentDidUpdate() {
        divRefs[onfocus].current.focus();
    }
    function changeTav(e , index) {
        alert(e.key)
        const currentTav = divRefs[index];
        alert(index)


    }
    const style = {
        width: "50px",
        height: "50px",
        border: "solid",
        color: "red"
    }
    return (
        <>
            <div tabindex={1}
               

                style={style}
                ref={divRefs[0]}
                tabIndex={1}
                onkeyPress={(e) => changeTav(e ,0)}
                // onKeyPress={e=>changeTav(e.target.value,index)}
                onClick={componentDidUpdate}
            >
            </div>,

            <div

                style={style}
                ref={divRefs[1]}
                tabIndex={1}
                onkeyPress={(e) => changeTav(e ,1)}
                onClick={componentDidUpdate}
            >
            </div>,
            <div

                style={style}
                ref={divRefs[2]}
                tabIndex={1}
                onKeyPress={(e) => changeTav(e ,2)}
                onClick={componentDidUpdate}
            >
            </div>,
            <div

                style={style}
                ref={divRefs[4]}
                tabIndex={1}
                onKeyPress={(e) => changeTav(e ,3)}
                onClick={componentDidUpdate}
            >
            </div>
        </>
    )


}

[ynonp]

הי רחלי

כמה הערות-

1. השם componentDidUpdate הוא בעל משמעות בריאקט - זה שם שמור בכתיב המחלקות. בקוד שלך אין התנגשות אבל זה עדיין מבלבל לראות אותו. נסי לבחור שם יותר רלוונטי למה שקורה כמו handleClick.

2. אני רואה שבעקבות לחיצת עכבר על אחד המלבנים את מעדכנת את הפוקוס של המלבן, אבל אני לא חושב שזה הכרחי. לחיצת העכבר כבר גורמת להזזת הפוקוס (אוטומטית, בגלל הדפדפן). מה שצריך לעשות בפונקציה שמטפלת בלחיצה הוא לעדכן את המשתנה onfocus כדי שהוא יהיה מסונכרן עם המלבן שעכשיו נמצא בפוקוס.

3. הדבר הבא שחסר זה שאחרי כל לחיצה (ב changeTav שלך) צריך להזיז את הפוקוס למלבן הבא. אנחנו יודעים מה האינדקס של המלבן שבו כתבו את הטקסט ולכן אפשר למצוא את האינדקס של המלבן שבא אחריו ולתת לו פוקוס:

const nextIndex = (index + 1) % 4;
setonfocus(nextIndex);
divRefs[nextIndex].current.focus();

5. לא הבנתי למה צריך את onfocus כמשתנה סטייט. מתי הוא אמור להתעדכן? מה ההשפעה שלו על הקומפוננטה?