ריאקט נייטיב נותנת לנו סט של קומפננטות שמובנות בה, אחת הקומפוננטות היא <TextInput> . כדי להתחיל ולהשתמש בה כל מה שנצטרך לעשות הוא רק לייבא אותה מתוך הספריה של ריאקט נייטיב. כך נעשה את זה:
import {TextInput} from "react-native";
השימוש הנפוץ ביותר של שדה קלט (Input) הוא בטפסים, החל מטופס רישום ,טופס התחברות,טופס צור קשר וכו..
בכל מקום שנרצה לקבל אינפוט מהמשתמש נצטרך להשתמש בשדה קלט
אחד השימושים הנפוצים הוא טופס התחברות מיד אראה איזה תכונות השדה יכול לקבל ואיך ניצור די בקלות שדה לאימייל ושדה לסיסמא.
בואו נתחיל:
הקומפוננטה TextInput יודעת לקבל מגוון רחב של props שיעשו לנו את רב העבודה.
כמו בווב גם בנייטיב נוכל להשתמש ב placeholder כל מה שנצטרך לעשות זה להעביר בקומפוננטה "placeholder="your placeholder
maxLength יגביל את אורך המחרוזת אותה ניתן לכתוב
בעזרת keyboardType נוכל לבחור איזה מקלדת תפתח לנו(אימייל מספרים וכו)
בשדה הסיסמא לא נרצה שהסיסמא שלנו תהיה חשופה לכן בעזרת {secureTextEntry={true
נוכל להסתיר את מה שהמשתמש מזין בעזרת נקודות.
אם נריץ את הקוד באנדרואיד נוכל לראות שמתחת לשדה התווסף קו, כדי לבטל אותו נוסיף
'underlineColorAndroid='transparent.
כדי לאפשר מספר שורות לכתיבה נוכל להוסיף {multiline = {true
אם יש לנו שדה טקסט חופשי נוכל אפילו לבדוק שגיאות כתיב בעזרת autoCorrect
כדי לעצב את שדה הטקסט נוכל להעביר את תגית ה- style
אחרי שסיימנו לעצב ולתת את כל ההגדרות ששדה הקלט שלנו צריך אנחנו צריכים לשמור את מה שהמשתמש מזין במשתנה ייחודי כדי שנוכל לשלוח את שם המשתמש והסיסמא לאימות בשרת לדוגמא.
לשם כך אנחנו נשתמש ב onChangeText שהוא בעצם Callback שנקרא כאשר הטקסט של שדה הקלט משתנה. כאשר הטקסט משתנה מועבר ״סטרינג״ חזרה. וכך כל שינוי בשדה הקלט נוכל לשמור את המשתנה שלנו מחדש. בדוגמא הבאה נשמור אותו ב State אבל כמובן אפשר להשתמש ב Hooks, או בסטייט גלובלי.
לאחר שהמשתמש סיים להקליד את המייל והסיסמא שלו ואנחנו שמרנו את מה שהוא הקליד ב state נוכל לשלוח אותם לשרת לאימות. לא יודעים איך פונים לשרת? תוכלו לקרוא כאן.
אם לא שמתם לב אין לנו שום ולידציה על השדות ובלחיצה על כפתור ה״שלח״ שמייד ניצור כל משתמש יוכל לשלוח שדות ריקים או לא בפורמט נכון ובכך להעמיס עלינו פניות מיותרות.
כמובן שיש ספריות טובות שמטפלות בולידציה כגון validatejs אך כרגע נסתפק בREGEX שיבדוק את שדה המייל.
validateEmail = (email) => {
let checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return checkEmail.test(email);
};
כעת נוסיף את כפתור השליחה שבלחיצה עליו נעשה אימות שהמשדות שלנו לא ריקים ושהשדה של האימייל אכן בפורמט הנכון. אם כל התנאים נכונים נוכל להמשיך הלאה ולשלוח את הפרטים לאימות בשרת במידה ולא כל התנאים נכונים נדפיס שגיאה לקונסול.
אם אהבתם את המאמר אשמח אם תשתפו/תמליצו לאחרים, אם יש לכם שאלות או הערות תוכלו להשאיר אותם בתגובות מתחת.
Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.