Izveidojiet skaistas nolaižamās izvēlnes, izmantojot React Select

Atlasītā ievade ir noderīgs tīmekļa lietotnes komponents, kas ļauj izvēlēties vērtību no daudzām opcijām, neaizņemot daudz vietas. Taču noklusējuma stils var būt blāvs un nesaskan ar pārējo jūsu dizainu.

React Select nodrošina elastīgu un pielāgojamu risinājumu, lai uzlabotu nolaižamās izvēlnes ievades izskatu un funkcionalitāti.

React Select instalēšana

React integrēšana ar citām bibliotēkām vai tehnoloģijām, piemēram, React Select, React Redux un daudzas citas, var vienkāršot izstrādes procesu.

Lai sāktu darbu ar React Select, tas ir jāinstalē savā projektā. Uz dariet to, izmantojot npm, palaidiet šo termināļa komandu savā projekta direktorijā:

npm i --save react-select

Tādējādi tiks instalēta un iestatīta bibliotēka jūsu React projektā, lai jūs varētu sākt to lietot.

Atlasīto ieeju izveide, izmantojot React Select

Tagad, kad esat iestatījis bibliotēku, varat to izmantot, lai izveidotu atlasītas ievades. Lai to izdarītu, izmantosit

Izvēlieties komponents. Šis ir ļoti pielāgojams komponents, kas lietotājiem ļauj atlasīt opcijas no saraksta.

Šeit ir piemērs, kā izmantot komponentu 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

Šis piemērs sākas, importējot Izvēlieties komponents no "reaģēt-izvēlēties”. Tas definē an iespējas masīvs ar trim objektiem, katrs ar a vērtību un a etiķete īpašums. Rekvizīts value apzīmē vērtību, ko veidlapa nosūtīs aizmugursistēmai, kad to iesniedzat. Iezīmes rekvizīts ir teksts, ko komponents Atlasīt parādīs nolaižamajā izvēlnē.

Atveidojot komponentu Select, nododiet tam opciju masīvu, izmantojot iespējas prop.

Izmantojot šo koda bloku, bibliotēka React Select ģenerēs šādu nolaižamo izvēlni:

Atlasīto ieeju pielāgošana

React Select nodrošina dažādus veidus, kā pielāgot atlasītās ievades. Varat izmantot CSS klases vai lietot iekļautos stilus tieši atlasītajām ievadēm atbilstoši savām vēlmēm.

Pielāgošana ar CSS klasēm

React Select bibliotēka nodrošina a klasesNosaukums atbalsts priekš Izvēlieties komponents. Izmantojiet šo klases nosaukuma rekvizītu lai lietotu pielāgotu kaskādes stila lapu (CSS) stilus jūsu Select komponentiem.

Piemēram:

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

Iepriekš minētais koda bloks ir līdzīgs iepriekšējam, taču tajā tiek izmantots klasesNosaukums piedāvājums, lai lietotu pielāgotu CSS klasi Izvēlieties komponents. Norādiet nosaukumu sadaļā ClassName, un varat to izmantot, lai komponentam lietotu CSS stilus:

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

Pēc stilu definēšanas atlasītā ievade izskatīsies šādi:

Pielāgošana, izmantojot iekļautos stilus

Varat arī definēt iekļautos stilus objektā, kuru nododat cauri stilus rekvizīti Izvēlieties komponents. Tas dod jums lielāku kontroli pār atsevišķu elementu stilu.

Šeit ir piemērs:

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

Rekvizīta objekts, pielāgoti stili, satur stila rekvizītus atlases komponentam kontrole, opciju, un izvēlne daļas. Šie rekvizīti ir funkcijas, kurām ir divi argumenti: bāzes stili un Valsts.

Parametrs baseStyles apzīmē noklusējuma stilus, ko nodrošina React Select, savukārt stāvokļa parametrs apzīmē elementa pašreizējo stāvokli. Šajā piemērā funkcijas izmanto izkliedes operatoru, lai apvienotu baseStyles ar papildu stiliem katrai komponenta daļai.

Pēc šo stilu lietošanas atlasītajai ievadei vajadzētu izskatīties šādi:

Funkcionalitātes pievienošana atlasītajām ieejām

React Select nodrošina vairākas funkcijas, lai uzlabotu atlasīto ieeju funkcionalitāti. Varat iespējot vairāku atlases un meklēšanas funkcionalitāti un pat izveidot pielāgotus nolaižamās izvēlnes komponentus.

Vairāku atlases funkcionalitāte

Lai nolaižamajos izvēlnēs iespējotu vairāku atlases funkcionalitāti, palaidiet garām isMulti atbalsts komponentam Select. Tas ļauj lietotājiem nolaižamajā izvēlnē atlasīt vairākas opcijas.

Piemēram:

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

Šis piemērs parāda, kā lietot isMulti atbalsts, lai atlasītajām ieejām pievienotu vairāku atlases funkcionalitāti.

Meklēšanas funkcionalitāte

React Select bibliotēka nodrošina iebūvētu meklēšanas funkcionalitāti, lai ērti filtrētu opcijas. Pēc noklusējuma komponents Atlasīt parāda meklēšanas ievadi, kad atverat nolaižamo izvēlni. Lietotāji var ievadīt meklēšanas ievadi, lai filtrētu pieejamās opcijas.

Lai iespējotu meklēšanas funkcionalitāti, nododiet ir Pārmeklējams balsts uz Izvēlieties komponents. Kā isMulti prop, isSearchable pieņem Būla vērtību.

Tālāk ir sniegts piemērs, kā izmantot rekvizītu isSearchable, lai iespējotu meklēšanas funkcionalitāti.

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

Atveidojot iepriekš minēto koda bloku, tiks parādīta atlasītā ievade ar meklēšanas funkcionalitāti. Tas izskatīsies un darbosies šādi:

Izveidojiet pielāgotus nolaižamās izvēlnes komponentus

React Select ļauj izveidot pielāgotus nolaižamās sastāvdaļas, izmantojot komponentu atbalstu. Varat ignorēt React Select nodrošinātos noklusējuma komponentus un pielāgot nolaižamās izvēlnes izskatu un darbību atbilstoši savai gaumei.

Piemēram:

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

Šis koda bloks parāda, kā atlasītai ievadei izveidot pielāgotus komponentus, izmantojot sastāvdaļas rekvizīti Izvēlieties komponents. Tas importē sastāvdaļas objekts, kas ir iepriekš definētu komponentu kolekcija, ko varat izmantot, lai pielāgotu dažādu elementu izskatu un uzvedību atlasītajās ievadēs.

Kods definē divus funkcionālos komponentus: CustomOption un Pielāgots nolaižamās izvēlnes indikators. Komponents CustomOption izmanto objektu kā parametru. Šis objekts satur dažādus rekvizītus, ko nodrošina React Select, piemēram innerProps un etiķete.

CustomDropdownIndicator komponents aizņem rekvizīti kā parametrs. Šis komponents atveido pielāgotu nolaižamās izvēlnes indikatoru ar lejupvērstas bultiņas simbolu. Kods rada a customComponents objekts, kas kartē CustomOption un CustomDropdownIndicator komponentus ar atbilstošo Opcija un Nolaižamās izvēlnes indikators atslēgas.

Visbeidzot, šis kods nodod customComponents objektu komponenta Select komponentiem. Tas atveidos atlasīto ievadi ar pielāgotajiem komponentiem, kas izskatās šādi:

Standarta sastāvdaļas var būt jaudīgākas un pievilcīgākas

React Select ir jaudīga bibliotēka, kas ļauj izveidot skaistas un stilīgas atlases ievades programmā React. Varat pielāgot atlasītās ievades, pievienot tām funkcionalitāti un izveidot pielāgotus nolaižamās izvēlnes komponentus. Izmantojot šo bibliotēku, varat uzlabot savu React lietotņu izskatu un lietotāja pieredzi.