Δημιουργήστε όμορφα αναπτυσσόμενα μενού με το React Select

Μια επιλεγμένη είσοδος είναι ένα χρήσιμο στοιχείο εφαρμογής ιστού που σας επιτρέπει να επιλέξετε μια τιμή από πολλές επιλογές χωρίς να καταλαμβάνει πολύ χώρο. Αλλά το προεπιλεγμένο στυλ μπορεί να είναι βαρετό και να έρχεται σε σύγκρουση με το υπόλοιπο σχέδιο σας.

Το React Select παρέχει μια ευέλικτη και προσαρμόσιμη λύση για τη βελτίωση της εμφάνισης και της λειτουργικότητας των αναπτυσσόμενων εισόδων.

Εγκατάσταση του React Select

Ενσωμάτωση του React με άλλες βιβλιοθήκες ή τεχνολογίες, όπως το React Select, το React Redux και πολλά άλλα, μπορούν να απλοποιήσουν τη διαδικασία ανάπτυξης.

Για να ξεκινήσετε με το React Select, πρέπει να το εγκαταστήσετε στο έργο σας. Προς την κάντε αυτό χρησιμοποιώντας npm, εκτελέστε αυτήν την εντολή τερματικού στον κατάλογο του έργου σας:

npm i --save react-select

Αυτό θα εγκαταστήσει και θα ρυθμίσει τη βιβλιοθήκη στο έργο σας React, ώστε να μπορείτε να αρχίσετε να τη χρησιμοποιείτε.

Δημιουργία επιλεγμένων εισόδων με το React Select

Τώρα που έχετε ρυθμίσει τη βιβλιοθήκη, μπορείτε να τη χρησιμοποιήσετε για να δημιουργήσετε επιλεγμένες εισόδους. Για να το κάνετε αυτό, θα χρησιμοποιήσετε το Επιλέγω συστατικό. Αυτό είναι ένα εξαιρετικά προσαρμόσιμο στοιχείο που επιτρέπει στους χρήστες να επιλέγουν επιλογές από μια λίστα.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του στοιχείου Επιλογή:

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 (




 </div>
 )
}
exportdefault App

Αυτό το παράδειγμα ξεκινάει με την εισαγωγή του Επιλέγω συστατικό από "αντιδρώ-επιλέγω”. Ορίζει ένα επιλογές πίνακας με τρία αντικείμενα, το καθένα με ένα αξία και ένα επιγραφή ιδιοκτησία. Η ιδιότητα τιμή αντιπροσωπεύει την τιμή που θα στείλει η φόρμα στο backend όταν την υποβάλετε. Η ιδιότητα ετικέτας είναι το κείμενο που θα εμφανίσει το στοιχείο Επιλογή στο αναπτυσσόμενο μενού.

Όταν αποδίδετε το στοιχείο Επιλογή, μεταβιβάστε του τον πίνακα επιλογών χρησιμοποιώντας το επιλογές στήριγμα.

Με αυτό το μπλοκ κώδικα, η βιβλιοθήκη React Select θα δημιουργήσει ένα αναπτυσσόμενο μενού όπως αυτό:

Προσαρμογή των Επιλογών εισόδων

Το React Select παρέχει διάφορους τρόπους προσαρμογής των επιλεγμένων εισόδων. Μπορείτε να χρησιμοποιήσετε κλάσεις CSS ή να εφαρμόσετε ενσωματωμένα στυλ απευθείας στις επιλεγμένες εισόδους, σύμφωνα με τις προτιμήσεις σας.

Προσαρμογή με τάξεις CSS

Η βιβλιοθήκη React Select παρέχει ένα όνομα τάξης στήριγμα για το Επιλέγω συστατικό. Χρησιμοποιήστε αυτό το prop className για εφαρμογή προσαρμοσμένου φύλλου στυλ Cascading (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

Το παραπάνω μπλοκ κώδικα είναι παρόμοιο με το προηγούμενο, αλλά χρησιμοποιεί το όνομα τάξης prop για να εφαρμόσετε μια προσαρμοσμένη κλάση CSS στο Επιλέγω συστατικό. Εισαγάγετε ένα όνομα στο prop className και μπορείτε να το χρησιμοποιήσετε για να εφαρμόσετε στυλ 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, ενώ η παράμετρος κατάστασης αντιπροσωπεύει την τρέχουσα κατάσταση του στοιχείου. Σε αυτό το παράδειγμα, οι συναρτήσεις χρησιμοποιούν τον τελεστή spread για να συνδυάσουν τα 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 για να προσθέσετε τη λειτουργία πολλαπλής επιλογής στις επιλεγμένες εισόδους σας.

Λειτουργικότητα αναζήτησης

Η βιβλιοθήκη React Select παρέχει ενσωματωμένη λειτουργία αναζήτησης για να φιλτράρετε εύκολα τις επιλογές. Από προεπιλογή, το στοιχείο Select εμφανίζει την είσοδο αναζήτησης όταν ανοίγετε το αναπτυσσόμενο μενού. Οι χρήστες μπορούν να πληκτρολογήσουν την είσοδο αναζήτησης για να φιλτράρουν τις διαθέσιμες επιλογές.

Για να ενεργοποιήσετε τη λειτουργία αναζήτησης, περάστε το είναι αναζητήσιμο στήριγμα στο Επιλέγω συστατικό. Σαν το isMulti prop, το isSearchable δέχεται μια boolean τιμή.

Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του isSearchable prop για να ενεργοποιήσετε τη λειτουργία αναζήτησης:

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 στο αντίστοιχο Επιλογή και Αναπτυσσόμενος δείκτης κλειδιά.

Τέλος, αυτός ο κώδικας μεταβιβάζει το αντικείμενο customComponents στη βάση στοιχείων του στοιχείου Select. Αυτό θα αποδώσει μια επιλεγμένη είσοδο με τα προσαρμοσμένα στοιχεία, που μοιάζει με αυτό:

Τα τυπικά εξαρτήματα μπορούν να είναι πιο ισχυρά και ελκυστικά

Το React Select είναι μια ισχυρή βιβλιοθήκη που σας επιτρέπει να δημιουργείτε όμορφες και κομψές επιλεγμένες εισόδους στο React. Μπορείτε να προσαρμόσετε τις επιλεγμένες εισόδους, να προσθέσετε λειτουργικότητα σε αυτές και να δημιουργήσετε προσαρμοσμένα αναπτυσσόμενα στοιχεία. Εκμεταλλευόμενοι αυτήν τη βιβλιοθήκη, μπορείτε να βελτιώσετε την εμφάνιση και την εμπειρία χρήστη των εφαρμογών σας React.