קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

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

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

ניהול שדות קלט בטפסים

ב-React, ניהול שדה קלט בטופס מתבצע לרוב על ידי יצירת מצב וקשירתו לשדה הקלט.

לדוגמה:

פוּנקצִיָהאפליקציה() {

const [firstName, setFirstName] = React.useState('');

פוּנקצִיָהhandleFirstNameChange(מִקרֶה) {
setFirstName( מִקרֶה.יַעַד.ערך )
}

לַחֲזוֹר (
<טופס>
<סוג קלט='טֶקסט' מציין מיקום='שם פרטי' onInput={handleFirstNameChange} />
</form>
)
}

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

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

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

instagram viewer

לדוגמה:

פוּנקצִיָהאפליקציה() {

const [formData, setFormData] = React.useState(
{
שם פרטי: '',
שם משפחה: ''
}
);

לַחֲזוֹר (
<טופס>
<סוג קלט='טֶקסט' מציין מיקום='שם פרטי' שם='שם פרטי' />
<סוג קלט='טֶקסט' מציין מיקום='שם משפחה' שם='שם משפחה' />
</form>
)
}

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

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

לדוגמה:

פוּנקצִיָהאפליקציה() {

const [formData, setFormData] = React.useState(
{
שם פרטי: '',
שם משפחה: ''
}
);

פוּנקצִיָהhandleChange(מִקרֶה) {
setFormData((prevState) => {
לַחֲזוֹר {
...prevState,
[event.target.name]: מִקרֶה.יַעַד.ערך
}
})
}

לַחֲזוֹר (
<טופס>
<קֶלֶט
סוג='טֶקסט'
מציין מיקום='שם פרטי'
שם='שם פרטי'
onInput={handleChange}
/>
<קֶלֶט
סוג='טֶקסט'
מציין מיקום='שם משפחה'
שם='שם משפחה'
onInput={handleChange}
/>
</form>
)
}

בלוק הקוד שלמעלה השתמש ב-an onInput אירוע ופונקציית מטפל, handleFirstNameChange. זֶה handleFirstNameChange הפונקציה תעדכן את מאפייני המצב בעת הקריאה. הערכים של מאפייני המצב יהיו זהים לאלו של רכיבי הקלט המתאימים להם.

המרת הכניסות שלך לרכיבים מבוקרים

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

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

כדי לעשות שימוש בכניסות מבוקרות באפליקציית React שלך, הוסף אבזר ערך לרכיב הקלט שלך:

פוּנקצִיָהאפליקציה() {

const [formData, setFormData] = React.useState(
{
שם פרטי: '',
שם משפחה: ''
}
);

פוּנקצִיָהhandleChange(מִקרֶה) {
setFormData((prevState) => {
לַחֲזוֹר {
...prevState,
[event.target.name]: מִקרֶה.יַעַד.ערך
}
})
}

לַחֲזוֹר (
<טופס>
<קֶלֶט
סוג='טֶקסט'
מציין מיקום='שם פרטי'
שם='שם פרטי'
onInput={handleChange}
value={formData.firstName}
/>
<קֶלֶט
סוג='טֶקסט'
מציין מיקום='שם משפחה'
שם='שם משפחה'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}

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

טיפול ברכיב הקלט Textarea

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

בקובץ index.html, ה- תג textarea אלמנט קובע את ערכו לפי הילדים שלו, כפי שניתן לראות בבלוק הקוד שלהלן:

<אזור טקסט>
שלום מה שלומך?
</textarea>

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

ככה:

פוּנקצִיָהאפליקציה() {

לַחֲזוֹר (
<טופס>
<סוג קלט='אזור טקסט' שם='הוֹדָעָה'/>
</form>
)
}

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

פוּנקצִיָהאפליקציה() {

לַחֲזוֹר (
<טופס>
<אזור טקסט
שם='הוֹדָעָה'
ערך='שלום מה שלומך?'
/>
</form>
)
}

ה אזור טקסט לתג יש תכונה value שמחזיקה את המידע של המשתמש שהוזן ב- אזור טקסט אֵלֵמֶנט. זה גורם לזה לעבוד כמו רכיב קלט React ברירת מחדל.

עבודה עם רכיב הקלט של תיבת הסימון של React

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

לדוגמה:

פוּנקצִיָהאפליקציה() {

לַחֲזוֹר (
<טופס>
<סוג קלט='תיבת סימון' id='הִצטָרְפוּת' שם='לְהִצְטַרֵף' />
<תווית htmlFor='הִצטָרְפוּת'>האם תרצה להצטרף לצוות שלנו?</label>
</form>
)
}

רכיב התווית מתייחס למזהה של רכיב הקלט באמצעות ה- htmlעבור תְכוּנָה. זֶה htmlעבור התכונה לוקחת את המזהה של רכיב הקלט - במקרה זה, הִצטָרְפוּת. מתי יצירת טופס HTML, ה htmlעבור תכונה מייצגת את ל תְכוּנָה.

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

אתה צריך לכלול שני אביזרים על תיבת סימון אלמנט קלט: א בָּדוּק רכוש וא בשינוי אירוע עם פונקציית מטפל שתקבע את ערך המדינה באמצעות ה- setIsChecked() פוּנקצִיָה.

לדוגמה:

פוּנקצִיָהאפליקציה() {

const [isChecked, setIsChecked] = React.useState(שֶׁקֶר);

פוּנקצִיָהhandleChange() {
setIsChecked( (prevState) => !prevState )
}

לַחֲזוֹר (
<טופס>
<קֶלֶט
סוג='תיבת סימון'
id='הִצטָרְפוּת'
שם='לְהִצְטַרֵף'
checked={isChecked}
onChange={handleChange}
/>
<תווית htmlFor='הִצטָרְפוּת'>האם תרצה להצטרף לצוות שלנו?</label>
</form>
)
}

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

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

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

הנה דוגמה:

פוּנקצִיָהאפליקציה() {

לתת[formData, setFormData] = React.useState(
{
שם פרטי: ''
לְהִצְטַרֵף: נָכוֹן,
}
);

פוּנקצִיָהhandleChange(מִקרֶה) {

const {name, value, type, checked} = event.target;

setFormData((prevState) => {
לַחֲזוֹר {
...prevState,
[שֵׁם]: סוּג תיבת סימון? מסומן: ערך
}
})
}

לַחֲזוֹר (
<טופס>
<קֶלֶט
סוג='טֶקסט'
מציין מיקום='שם פרטי'
שם='שם פרטי'
onInput={handleChange}
value={formData.firstName}
/>
<קֶלֶט
סוג='תיבת סימון'
id='הִצטָרְפוּת'
שם='לְהִצְטַרֵף'
checked={formData.join}
onChange={handleChange}
/>
<תווית htmlFor='הִצטָרְפוּת'>האם תרצה להצטרף לצוות שלנו?</label>
</form>
)
}

שימו לב שב- handleChange פוּנקצִיָה, setFormData משתמש באופרטור טריני כדי להקצות את הערך של ה- בָּדוּק מאפיין למאפייני המדינה אם סוג קלט היעד הוא a תיבת סימון. אם לא, הוא מקצה את הערכים של ערך תְכוּנָה.

עכשיו אתה יכול לטפל בטפסי תגובה

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

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