צור תפריטים נפתחים יפים עם React Select

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

React Select מספקת פתרון גמיש וניתן להתאמה אישית כדי לשפר את המראה והפונקציונליות של כניסות נפתחות.

התקנת React Select

שילוב של React עם ספריות או טכנולוגיות אחרות, כמו React Select, React Redux ורבים נוספים, יכולים לפשט את תהליך הפיתוח.

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

npm i --save react-select

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

יצירת כניסות Select עם React Select

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

הנה דוגמה לשימוש ברכיב הבחירה:

import React from"react"
import Select from"react-select"
functionApp() 





instagram viewer
{
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]

return (




 </div>
 )
}
exportdefault App

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

כאשר אתה מעבד את רכיב הבחירה, העביר את מערך האפשרויות אליו באמצעות ה- אפשרויות לִתְמוֹך.

עם בלוק הקוד הזה, ספריית React Select תיצור תפריט נפתח כמו זה:

התאמה אישית של כניסות בחר

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

התאמה אישית עם שיעורי CSS

ספריית React Select מספקת א className אביזר עבור ה בחר רְכִיב. השתמש במאפיין className זה להחיל גיליון סגנון מדורג (CSS) מותאם אישית סגנונות לרכיבי הבחירה שלך.

לדוגמה:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
return (



'select'/>
 </div>
 )
}
exportdefault App

בלוק הקוד שלמעלה דומה לקודם, אך הוא משתמש ב- className prop להחיל מחלקת CSS מותאמת אישית על בחר רְכִיב. ספק שם ב-className prop ותוכל להשתמש בו כדי להחיל סגנונות CSS על הרכיב:

.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}

לאחר הגדרת הסגנונות, הקלט הבחירה שלך ייראה כך:

התאמה אישית עם סגנונות מוטבעים

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

הנה דוגמה:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customStyles = {
 control: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#e2e2e2",
 }),
 option: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: state.isFocused? "#e2e2e2": "",
 color: state.isFocused? "#333333": "#FFFFFF",
 }),
 menu: (baseStyles, state) => ({
 ...baseStyles,
 backgroundColor: "#333333",
 }),
 }
return (




 </div>
 )
}
exportdefault App

חפץ האביזר, סגנונות מותאמים אישית, מכיל מאפייני סגנון עבור רכיבי הבחירה לִשְׁלוֹט, אוֹפְּצִיָה, ו תַפרִיט חלקים. מאפיינים אלה הם פונקציות המקבלות שני ארגומנטים: סגנונות בסיס ו מדינה.

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

לאחר החלת סגנונות אלה, הקלט הבחירה שלך אמור להיראות כך:

הוספת פונקציונליות לכניסות הבחירה

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

פונקציונליות מרובה בחירה

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

לדוגמה:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 { value: "grapes", label: "Grapes" },
 { value: "orange", label: "Orange" },
 ]
return (




 </div>
 )
}
exportdefault App

דוגמה זו מדגימה כיצד להשתמש ב- isMulti prop כדי להוסיף את הפונקציונליות של ריבוי בחירה לכניסות הבחירה שלך.

פונקציונליות חיפוש

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

כדי לאפשר פונקציונליות חיפוש, העבר את ה ניתן לחיפוש תמיכה ל בחר רְכִיב. כמו isMulti prop, isSearchable מקבל ערך בוליאני.

להלן דוגמה כיצד להשתמש באבזר isSearchable כדי לאפשר פונקציונליות חיפוש:

import React from"react"
import Select from"react-select"
functionApp() {
const options = [
 { value: "apple", label: "Apple" },
 { value: "apricot", label: "Apricot" },
 { value: "mango", label: "Mango" },
 { value: "mangosteens", label: "Mangosteens" },
 { value: "avocado", label: "Avocado" },
 ]
return (




 </div>
 )
}
exportdefault App

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

צור רכיבי תפריט נפתחים מותאמים אישית

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

לדוגמה:

import React from"react"
import Select, { components } from"react-select"
functionApp() {
const CustomOption = (obj) => (



{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
 </div>
 )

const CustomDropdownIndicator = (props) => (

↓</span>
 </components.DropdownIndicator>
 )
const options = [
 { value: "apple", label: "Apple" },
 { value: "pineapple", label: "Pineapple" },
 { value: "watermelon", label: "Watermelon" },
 ]
const customComponents = {
 Option: CustomOption,
 DropdownIndicator: CustomDropdownIndicator,
 }
return<Selectoptions={options}components={customComponents} />
}
exportdefault App

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

הקוד מגדיר שני מרכיבים פונקציונליים: אפשרות מותאמת אישית ו CustomDropdownIndicator. הרכיב CustomOption לוקח אובייקט כפרמטר. אובייקט זה מכיל מאפיינים שונים ש-React Select מספקת, כמו innerProps ו תווית.

הרכיב CustomDropdownIndicator לוקח אביזרים כפרמטר. רכיב זה מציג מחוון נפתח מותאם אישית עם סמל חץ כלפי מטה. הקוד יוצר א רכיבים מותאמים אישית אובייקט שממפה את הרכיבים CustomOption ו- CustomDropdownIndicator לרכיבים התואמים אוֹפְּצִיָה ו DropdownIndicator מפתחות.

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

רכיבים סטנדרטיים יכולים להיות חזקים ואטרקטיביים יותר

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