עשה סדר בטפסים שלך עם השילוב הזה של ספריות פונקציונליות ועיצוביות.

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

למרות שהוא תוכנן עבור React, אתה יכול להרחיב את היכולות שלו למסגרות אחרות בתוך המערכת האקולוגית של React, כמו Next.js.

תחילת העבודה עם טופס ה-React Hook וממשק המשתמש של החומר

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

על ידי שילוב ממשק משתמש חומרי רכיבי ממשק משתמש וסגנונות, אתה יכול ליצור טפסים יפים וקלים לשימוש, ולהחיל עיצוב עקבי ליישום Next.js שלך.

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

npx create-next-app@latest next-project --app

לאחר מכן, התקן את החבילות האלה בפרויקט שלך:

npm install react-hook-form @mui/material @mui/system @emotion/react @emotion/styled

הנה תצוגה מקדימה של מה שתבנה:

אתה יכול למצוא את הקוד של הפרויקט הזה בזה GitHub מאגר.

instagram viewer

יצירה ועיצוב טפסים

React Hook Form מספק מגוון פונקציות שירות, כולל useForm וו.

חיבור זה מייעל את תהליך הטיפול במצב טופס, אימות קלט ושליחה, ומפשט את ההיבטים הבסיסיים של ניהול טפסים.

כדי ליצור טופס שעושה שימוש בהוק הזה, הוסף את הקוד הבא לקובץ חדש, src/components/form.js.

ראשית, הוסף את הייבוא ​​הנדרש עבור חבילות React Hook Form וחבילות MUI:

"use client"
import React, {useState} from'react';
import { useForm } from'react-hook-form';
import { TextField, Button as MuiButton, Alert } from'@mui/material';
import { styled } from'@mui/system';

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

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

ממש מתחת לייבוא, הוסף את הקוד הזה:

const FormContainer = styled('div')({
 display: 'flex',
 flexDirection: 'column',
 alignItems: 'center',
 justifyContent: 'center',
 height: '100vh',
});
const StyledForm = styled('form')({
 width: '80%',
 maxWidth: '400px',
 padding: '20px',
 borderRadius: '10px',
 border: '2px solid #1E3A8A',
 boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.2)',
 backgroundColor: '#ffffff',
 textAlign: 'center',
});
const StyledTextField = styled(TextField)({
 marginBottom: '16px',
 width: '100%',
});

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

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

כעת, הגדר את הרכיב הפונקציונלי:

exportdefaultfunctionForm() {
const { register, handleSubmit, formState: { errors } } = useForm();

return (
 <>


 label="Username"
 type="text"
 />
 label="Password"
 type="password"
 />
 type="submit"
 variant="contained"
 color="primary"
 margin="5px"
 > Submit </MuiButton>
 </StyledForm>
 </FormContainer>
 </>
 );
}

לבסוף, ייבא את הרכיב הזה שלך app/page.js קוֹבֶץ. מחק את כל קוד Next.js של ה-boilerplate ועדכן אותו בדברים הבאים:

import Form from'src/components/Form'
exportdefaultfunctionHome() {
return (



 </main>
 )
}

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

טיפול באימות טופס

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

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

const [formStatus, setFormStatus] = useState({ success: false, error: '' });

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

const onSubmit = (data) => {
if (data.username 'testuser' && data.password 'password123') {
 setFormStatus({ success: true, error: '' });
 } else {
 setFormStatus({ success: false, error: 'Invalid username or password' });
 }
};

הוסף פונקציית מטפל באירועים של onClick לרכיב הכפתור - העבר אותו כאביזר - כדי להפעיל את הפונקציה onSubmit כאשר משתמש לוחץ על כפתור השליחה.

onClick={handleSubmit(onSubmit)}

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

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

כדי לעשות זאת, הוסף את הקוד הבא ממש מתחת ל- StyledForm תג פתיחה.

{formStatus.success? (
"success">Form submitted successfully</Alert>
): formStatus.error? (
"error">{formStatus.error}</Alert>
): null}

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

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

קדימה וכלול את הקוד הבא בתור אבזר בשם המשתמש StyledTextField רְכִיב.

{...register('username', {
 required: 'Username required',
 pattern: {
 value: /^[a-zA-Z0-9_.-]*$/,
 message: 'Invalid characters used'
 },
 minLength: {
 value: 6,
 message: 'Username must be at least 6 characters'
 },
})}

כעת, הוסף את האובייקט הבא בתור אביזר ב- סיסמהStyledTextField רְכִיב.

{...register('password', {
 required: 'Password required',
 minLength: {
 value: 8,
 message: 'Password must be at least 8 characters'
 },
})}

הוסף את הקוד הבא מתחת לשדה הקלט של שם המשתמש כדי לספק משוב חזותי על דרישות הקלט.

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

{errors.username && <Alertseverity="error">{errors.username.message}Alert>}

לבסוף, כלול קוד דומה ממש מתחת לשדה הטקסט להזנת סיסמה:

{errors.password && <Alertseverity="error">{errors.password.message}Alert>}

מדהים! עם השינויים האלה, אתה אמור לקבל צורה מושכת ויזואלית ופונקציונלית שנוצרה עם React Hook Form ו-Material UI.

שפר את הפיתוח של Next.js שלך עם ספריות בצד הלקוח

ממשק המשתמש של החומר ו-React Hook Form הם רק שתי דוגמאות למספר רב של ספריות נהדרות בצד הלקוח שבהן אתה יכול להשתמש כדי להאיץ את פיתוח החזית של Next.js.

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