כיצד לבנות טפסים ב-React באמצעות טופס React Hook

בניית טפסים באפליקציית React יכולה להיות מורכבת וגוזלת זמן. בעזרת ספריית React Hook Forms, אתה יכול בקלות להוסיף טפסים בעלי ביצועים גבוהים לאפליקציית React שלך.

React Hook Form היא ספרייה לבניית טפסים ב-React המפשטת את תהליך יצירת טפסים מורכבים וניתנים לשימוש חוזר. אם אתה מחפש לבנות אפליקציית React, עליך ללמוד כיצד לבנות טפסים ב-React באמצעות ספריית הטופס של React Hook.

התקנת טופס React Hook

כדי להתחיל להשתמש ב-React Hook Form, עליך להתקין אותו באמצעות מנהלי npm או חבילות חוט.

כדי להתקין את React Hook Form באמצעות npm, הפעל את הפקודה הבאה בטרמינל שלך:

npm להתקין react-hook-form

כדי להתקין את React Hook Form באמצעות חוט, הפעל את הפקודה הבאה:

חוט להוסיף להגיב-וו-טופס

יצירת טופס באמצעות טופס React Hook

כדי ליצור טופס באמצעות טופס React Hook, עליך להשתמש ב- useForm וו. ה useForm hook נותן לך גישה לשיטות ולמאפיינים שתשתמש בהם לבנות ולנהל את הטפסים שלך באפליקציית React שלך.

הנה דוגמה שמראה כיצד להשתמש ב- useForm וו:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא





instagram viewer
 { useForm } מ'תגובה-וו-טופס';
פוּנקצִיָהטופס() {
const { register, handleSubmit } = useForm();
const onSubmit = (נתונים) =>לְנַחֵם.log (נתונים);
לַחֲזוֹר (



'טֶקסט' { ...הירשם("שם פרטי")} />
שלח</button>
 </form>
 )
}
יְצוּאבְּרִירַת מֶחדָל טופס;

ספריית React Hook Form משתמשת ב- הירשם שיטה לרשום את ערכי הקלט שלך ל-hook. ה הירשם השיטה מחברת את שדות הקלט של טופס לספריית React Hook Form, כך שהספרייה תוכל לעקוב ולאמת את שדות הקלט.

בבלוק הקוד למעלה, אתה רושם קלט עם השם 'שם פרטי' handleSubmit השיטה של ​​ספריית הטופס React Hook מטפלת בהגשת הטופס.

כדי לטפל בהגשת טופס, תעביר את פונקציית ההתקשרות חזרה ב-Submit אל ה handleSubmit שיטה. ה ב-Submit הפונקציה תקבל אובייקט המכיל את הערכים של כל כניסות הטופס.

אימות קלט עם שיטת רישום

ה הירשם השיטה מאפשרת לך להגדיר כללי אימות עבור שדות הקלט שלך. כדי להוסיף אימות לשדות הקלט שלך, אתה מעביר אובייקט עם כללי אימות כארגומנט השני ל- הירשם שיטה.

ככה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { useForm } מ'תגובה-וו-טופס';
פוּנקצִיָהטופס() {
const{ register, handleSubmit } = useForm();
const onSubmit = (נתונים) =>לְנַחֵם.log (נתונים);
לַחֲזוֹר (



'טֶקסט' { ...הירשם("שם פרטי", { נדרש: נָכוֹן})} />
'סיסמה' { ...הירשם("סיסמה", { נדרש: נָכוֹן, אורך מקסימלי: 10})}/>
שלח</button>
 </form>
 )
}
יְצוּאבְּרִירַת מֶחדָל טופס;

בדוגמה זו, אתה מוסיף כלל אימות לשדה הקלט "שם פרטי" ושני כללי אימות ל"סיסמה". ה נדרש כלל מציין שהמשתמש צריך למלא את שדות הקלט, והוא לא יכול לשלוח את הטופס אם השדות ריקים.

ה אורך מקסימלי כלל מגדיר את המספר המרבי של אותיות אלפביתיות של ערך הקלט. מלבד נדרש ו אורך מקסימלי שיטות, אתה יכול להוסיף כללי אימות אחרים, כגון דקה, מקסימום, minLength, תבנית, ו לְאַמֵת.

מינימום מקסימום

ה דקה כלל מציין את הערך המינימלי עבור שדה קלט ואת ה- מקסימום כלל מציין את הערך המרבי שלו.

אתה יכול להשתמש ב דקה ו מקסימום כללים עם קלט מסוג מספר, כמו זה:

'מספר' { ...הירשם("גיל", {דקה: 18, מקסימום: 35}) } />

הערך של שדה הקלט למעלה חייב להיות לפחות 18 ולא יותר מ-35.

minLength

ה minLength כלל דומה ל- אורך מקסימלי כלל אך מגדיר את המספר המינימלי של אותיות אלפביתיות במקום זאת:

'טֶקסט' { ...הירשם("שֵׁם", { minLength: 10 })}/>

בדוגמה זו, כלל minLength מציין שערך הקלט צריך להיות באורך של לפחות 10 תווים.

דפוס ואימות

ה תבנית כלל מציין דפוס ביטוי רגולרי שערך הקלט חייב להתאים לו. ה לְאַמֵת כלל מאפשר לך להגדיר פונקציית אימות מותאמת אישית כדי לאמת את ערך הקלט. גם הפונקציה צריכה לחזור נָכוֹן או הודעת שגיאה של מחרוזת.

לדוגמה:

'טֶקסט' { ...הירשם("שם פרטי", {תבנית: **/^[A-Za-z]+$/**}) } />
'מספר' { ...הירשם("מִבְחָן", {**אמת: (ערך) => ערך <= 12** }) } />

בדוגמה זו, הקלט "שם פרטי" משתמש ב- תבנית כְּלָל. ה תבנית דורש שערך הקלט יכיל רק תווים אלפביתיים (אותיות גדולות ואותיות קטנות).

קלט ה"בדיקה" משתמש ב- לְאַמֵת כלל להגדרת פונקציית אימות מותאמת אישית הבודקת אם הערך שלה קטן או שווה ל-12.

טיפול בשגיאות בטופס שלך

ספריית React Hook Form מספקת מנגנון מובנה עבור טיפול בשגיאות JavaScript בטפסים שלך. ה handleSubmit הפונקציה, הנקראת כאשר המשתמש שולח את הטופס, מחזירה הבטחה שנפתרת עם נתוני הטופס אם האימות מצליח.

עם זאת, אם מתרחשות שגיאות אימות כלשהן, ההבטחה נדחית עם אובייקט שגיאה המכיל את שגיאות האימות.

להלן דוגמה כיצד לטפל בשגיאות באמצעות ה handleSubmit פוּנקצִיָה:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { useForm } מ'תגובה-וו-טופס';
פוּנקצִיָהטופס() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (נתונים) =>לְנַחֵם.log (נתונים); 
לַחֲזוֹר (



'טֶקסט' { ...הירשם("שם פרטי", { נדרש: נָכוֹן})} />
 {errors.firstname && <לְהַקִיף>אנא הזן את שמך הפרטילְהַקִיף>}
'מספר' { ...הירשם("גיל", {דקה: 18, מקסימום: 35,}) } />
 {errors.age?.type 'מקסימום' && <לְהַקִיף> אתה מבוגר מדי עבור האתר הזהלְהַקִיף>}
 {errors.age?.type 'דקה' && <לְהַקִיף> אתה צעיר מדי בשביל האתר הזהלְהַקִיף>}
שלח</button>
 </form>
 )
}
יְצוּאבְּרִירַת מֶחדָל טופס;

בבלוק קוד זה, ה formState האובייקט מקבל גישה לשגיאות של כל שדה. ה שגיאות האובייקט מאחסן את שגיאות האימות עבור כל שדה קלט. ה שגיאות אובייקט מעבד באופן מותנה הודעת שגיאה עבור כל שדה לא חוקי.

בשביל ה שם פרטי שדה קלט, אם נדרש כלל אינו מתקיים, הודעת שגיאה - "אנא הזן את השם הפרטי שלך" - תוצג ליד שדה הקלט. אם הערך של ה גיל שדה הקלט נמצא מחוץ לטווח המותר, תוצג הודעת שגיאה.

אם הערך נמוך מ-18, הודעת השגיאה תהיה "אתה צעיר מדי עבור האתר הזה", ואם הערך גדול מ-35, הודעת השגיאה תהיה "אתה מבוגר מדי עבור האתר הזה".

עכשיו אתה יכול לבנות טפסים אמינים ב-React

בניית טפסים ב-React יכולה להיות תהליך מורכב וגוזל זמן. ובכל זאת, React Hook Form מפשט את המשימה הזו על ידי מתן ספרייה קלה לשימוש וגמישה לניהול נתוני טפסים ואימות.

בעזרת שיטת useForm hook, method register ו-handleSubmit, בניית טפסים ב-React הופכת לתהליך יעיל ויעיל יותר. אתה יכול ליצור טפסים פונקציונליים, בתורם לשפר את חווית המשתמש ואת האיכות הכוללת של יישומי React שלך.