Looge React Selectiga kauneid rippmenüü

Valitud sisend on kasulik veebirakenduse komponent, mis võimaldab teil valida paljude valikute hulgast väärtuse ilma palju ruumi võtmata. Kuid vaikestiil võib olla igav ja olla vastuolus teie ülejäänud kujundusega.

React Select pakub paindlikku ja kohandatavat lahendust rippmenüü sisendite välimuse ja funktsionaalsuse parandamiseks.

React Selecti installimine

Reacti integreerimine teiste raamatukogude või tehnoloogiatega, nagu React Select, React Redux ja palju muud, võivad arendusprotsessi lihtsustada.

React Selectiga alustamiseks peate selle oma projekti installima. To tehke seda kasutades npm, käivitage see terminali käsk oma projekti kataloogis:

npm i --save react-select

See installib ja seadistab teie Reacti projekti teegi, et saaksite seda kasutama hakata.

Valiku sisendite loomine React Selectiga

Nüüd, kui olete teegi seadistanud, saate seda kasutada valitud sisendite loomiseks. Selleks kasutate Valige komponent. See on väga kohandatav komponent, mis võimaldab kasutajatel loendist valikuid valida.

Siin on näide komponendi Select kasutamise kohta.

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

See näide algab faili importimisega Valige komponent alates "reageeri-vali”. See määratleb an valikuid massiiv kolme objektiga, millest igaühel on a väärtus ja a silt vara. Atribuut väärtus tähistab väärtust, mille vorm saadab selle esitamisel taustaprogrammi. Sildi atribuut on tekst, mille komponent Vali rippmenüüs kuvab.

Valimiskomponendi renderdamisel edastage sellele suvandite massiiv, kasutades nuppu valikuid prop.

Selle koodiplokiga loob React Select teek sellise rippmenüü:

Valitud sisendite kohandamine

React Select pakub erinevaid võimalusi valitud sisendite kohandamiseks. Saate kasutada CSS-i klasse või rakendada sisemisi stiile otse valitud sisenditele vastavalt oma eelistustele.

Kohandamine CSS-klassidega

Teek React Select pakub a klassi nimi prop for Valige komponent. Kasutage seda klassinime prop kohandatud kaskaadlaaditabeli (CSS) rakendamiseks stiilid oma Select komponentidele.

Näiteks:

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

Ülaltoodud koodiplokk on sarnane eelmisele, kuid kasutab klassi nimi prop kohandatud CSS-klassi rakendamiseks Valige komponent. Sisestage nimi propus className ja saate seda kasutada komponendile CSS-stiilide rakendamiseks:

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

Pärast stiilide määratlemist näeb teie valitud sisend välja järgmine:

Kohandamine tekstisiseste stiilidega

Samuti saate määratleda tekstisiseseid stiile objektis, mille kaudu edastate stiilid prop of the Valige komponent. See annab teile suurema kontrolli üksikute elementide stiili üle.

Siin on näide:

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

Rekvisiitobjekt, kohandatud stiilid, sisaldab komponendi Select stiili atribuute kontroll, valikja menüü osad. Need omadused on funktsioonid, millel on kaks argumenti: baseStyles ja olek.

Parameeter baseStyles tähistab React Selecti pakutavaid vaikestiile, olekuparameeter aga elemendi praegust olekut. Selles näites kasutavad funktsioonid levikuoperaatorit, et kombineerida baseStyles komponendi iga osa jaoks lisalaadidega.

Pärast nende stiilide rakendamist peaks teie valitud sisend välja nägema järgmine:

Funktsionaalsuse lisamine sisendite valikule

React Select pakub mitmeid funktsioone valitud sisendite funktsionaalsuse täiustamiseks. Saate lubada mitme valiku ja otsingu funktsioonid ning luua isegi kohandatud rippmenüü komponente.

Mitme valikuga funktsionaalsus

Rippmenüüdes mitme valiku funktsiooni lubamiseks edastage isMulti toetada komponendi Vali. See võimaldab kasutajatel valida rippmenüüst mitu valikut.

Näiteks:

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

See näide näitab, kuidas kasutada isMulti prop, et lisada valitud sisenditele mitme valikuga funktsioon.

Otsingufunktsioonid

Teek React Select pakub valikute hõlpsaks filtreerimiseks sisseehitatud otsingufunktsiooni. Vaikimisi kuvab komponent Vali rippmenüü avamisel otsingusisendi. Kasutajad saavad saadaolevate valikute filtreerimiseks sisestada otsingusisendi.

Otsingufunktsiooni lubamiseks edastage on Otsitav toetada Valige komponent. Nagu isMulti prop, isSearchable aktsepteerib tõeväärtust.

Siin on näide selle kohta, kuidas kasutada otsingufunktsiooni lubamiseks rekvisiite 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

Ülaltoodud koodiploki renderdamisel kuvatakse otsingufunktsiooniga valitud sisend. See näeb välja ja toimib järgmiselt:

Looge kohandatud rippmenüü komponendid

React Select võimaldab teil luua kohandatud rippmenüü komponente, kasutades komponentide propi. Saate tühistada React Selecti pakutavad vaikekomponendid ja kohandada rippmenüü välimust ja käitumist vastavalt oma maitsele.

Näiteks:

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

See koodiplokk näitab, kuidas luua valitud sisendi jaoks kohandatud komponente, kasutades komponendid prop of the Valige komponent. See impordib komponendid objekt, mis on eelnevalt määratletud komponentide kogum, mida saate kasutada erinevate elementide välimuse ja käitumise kohandamiseks valitud sisendites.

Kood määratleb kaks funktsionaalset komponenti: Kohandatud valik ja Kohandatud rippmenüü indikaator. Komponent CustomOption võtab parameetrina objekti. See objekt sisaldab mitmesuguseid atribuute, mida React Select pakub, näiteks sisemised rekvisiidid ja silt.

CustomDropdownIndicator komponent võtab rekvisiidid parameetrina. See komponent renderdab kohandatud rippmenüü indikaatori koos allapoole suunatud noolesümboliga. Kood loob a kohandatud komponendid objekt, mis vastendab komponendid CustomOption ja CustomDropdownIndicator vastavaga Võimalus ja Rippmenüü indikaator võtmed.

Lõpuks edastab see kood objekti customComponents komponendi Select komponentide propele. See renderdab kohandatud komponentidega valitud sisendi, mis näeb välja järgmine:

Standardkomponendid võivad olla võimsamad ja atraktiivsemad

React Select on võimas teek, mis võimaldab teil Reactis luua kauneid ja stiilseid valikusisendeid. Saate kohandada valitud sisendeid, lisada neile funktsioone ja luua kohandatud rippmenüü komponente. Seda teeki kasutades saate täiustada oma Reacti rakenduste välimust ja kasutuskogemust.