Vytvorte krásne rozbaľovacie zoznamy pomocou funkcie React Select

Výberový vstup je užitočný komponent webovej aplikácie, ktorý vám umožňuje vybrať hodnotu z mnohých možností bez toho, aby zaberal veľa miesta. Predvolený štýl však môže byť nudný a môže byť v rozpore so zvyškom vášho dizajnu.

React Select poskytuje flexibilné a prispôsobiteľné riešenie na zlepšenie vzhľadu a funkčnosti rozbaľovacích vstupov.

Inštalácia React Select

Integrácia Reactu s inými knižnicami alebo technológiami, ako React Select, React Redux a mnohé ďalšie, môžu zjednodušiť proces vývoja.

Ak chcete začať s React Select, musíte si ho nainštalovať do svojho projektu. Komu urobte to pomocou npm, spustite tento príkaz terminálu v adresári projektu:

npm i --save react-select

Toto nainštaluje a nastaví knižnicu vo vašom projekte React, takže ju môžete začať používať.

Vytváranie vstupov Select pomocou funkcie React Select

Teraz, keď ste nastavili knižnicu, môžete ju použiť na vytváranie vybraných vstupov. Na tento účel použijete

Vyberte komponent. Toto je vysoko prispôsobiteľný komponent, ktorý umožňuje používateľom vybrať si možnosti zo zoznamu.

Tu je príklad použitia 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

Tento príklad začína importovaním súboru Vyberte komponent z “reagovať-vyberať”. Definuje an možnosti pole s tromi objektmi, každý s a hodnotu a a štítok nehnuteľnosť. Vlastnosť value predstavuje hodnotu, ktorú formulár odošle do backendu, keď ho odošlete. Vlastnosť label je text, ktorý komponent Select zobrazí v rozbaľovacej ponuke.

Keď vykreslíte komponent Select, odovzdajte mu pole volieb pomocou možnosti rekvizita.

S týmto blokom kódu knižnica React Select vygeneruje rozbaľovaciu ponuku, ako je táto:

Prispôsobenie výberu vstupov

React Select poskytuje rôzne spôsoby prispôsobenia vybraných vstupov. Môžete použiť triedy CSS alebo použiť inline štýly priamo na vybrané vstupy podľa vašich preferencií.

Prispôsobenie pomocou tried CSS

Knižnica React Select poskytuje a className rekvizita pre Vyberte komponent. Použite túto rekvizitu className použiť vlastný kaskádový štýl (CSS) štýlov do komponentov Select.

Napríklad:

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

Vyššie uvedený blok kódu je podobný predchádzajúcemu, ale používa className prop použiť vlastnú triedu CSS na Vyberte komponent. Zadajte názov do podpery className a môžete ho použiť na aplikáciu štýlov CSS na komponent:

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

Po definovaní štýlov bude váš vybraný vstup vyzerať takto:

Prispôsobenie pomocou vložených štýlov

Môžete tiež definovať vložené štýly v objekte, ktorý prechádzate cez štýlov opora z Vyberte komponent. To vám dáva väčšiu kontrolu nad štýlom jednotlivých prvkov.

Tu je príklad:

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

Objekt rekvizity, customStylesobsahuje vlastnosti štýlu pre komponent Select ovládanie, možnosť, a Ponuka časti. Tieto vlastnosti sú funkcie, ktoré majú dva argumenty: základné štýly a štát.

Parameter baseStyles predstavuje predvolené štýly poskytované React Select, zatiaľ čo parameter state predstavuje aktuálny stav prvku. V tomto príklade funkcie používajú operátor spread na kombináciu základných štýlov s extra štýlmi pre každú časť komponentu.

Po použití týchto štýlov by váš vybraný vstup mal vyzerať takto:

Pridanie funkcií k vybraným vstupom

React Select poskytuje niekoľko funkcií na zlepšenie funkčnosti vybraných vstupov. Môžete povoliť viacnásobný výber a funkciu vyhľadávania a dokonca vytvoriť vlastné rozbaľovacie komponenty.

Viacnásobný výber funkcií

Ak chcete vo svojich rozbaľovacích zoznamoch povoliť funkciu viacnásobného výberu, prejdite isMulti podpera komponentu Select. To umožňuje používateľom vybrať viacero možností z rozbaľovacej ponuky.

Napríklad:

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

Tento príklad ukazuje, ako používať isMulti podperu na pridanie funkcie viacnásobného výberu k vašim vybraným vstupom.

Funkcia vyhľadávania

Knižnica React Select poskytuje vstavanú funkciu vyhľadávania na jednoduché filtrovanie možností. V predvolenom nastavení komponent Select zobrazuje vstup vyhľadávania, keď otvoríte rozbaľovaciu ponuku. Používatelia môžu zadať vstup vyhľadávania a filtrovať dostupné možnosti.

Ak chcete povoliť funkciu vyhľadávania, prejdite na isSearchable podpera k Vyberte komponent. Ako isMulti prop, isSearchable akceptuje boolovskú hodnotu.

Tu je príklad použitia podpory isSearchable na aktiváciu funkcie vyhľadávania:

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

Vykreslenie bloku kódu vyššie zobrazí výberový vstup s funkciou vyhľadávania. Bude to vyzerať a fungovať takto:

Vytvorte si vlastné rozbaľovacie komponenty

React Select vám umožňuje vytvárať vlastné rozbaľovacie komponenty pomocou podpery komponentov. Môžete prepísať predvolené komponenty poskytované React Select a prispôsobiť vzhľad a správanie rozbaľovacej ponuky podľa vášho vkusu.

Napríklad:

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

Tento blok kódu ukazuje, ako vytvoriť vlastné komponenty pre vybraný vstup pomocou komponentov opora z Vyberte komponent. Dováža komponentov objekt, ktorý je kolekciou preddefinovaných komponentov, ktoré môžete použiť na prispôsobenie vzhľadu a správania rôznych prvkov vo vybratých vstupoch.

Kód definuje dve funkčné zložky: CustomOption a CustomDropdownIndicator. Komponent CustomOption berie objekt ako parameter. Tento objekt obsahuje rôzne vlastnosti, ktoré React Select poskytuje, napr innerProps a štítok.

Komponent CustomDropdownIndicator trvá rekvizity ako parameter. Tento komponent vykresľuje vlastný rozbaľovací indikátor so symbolom šípky nadol. Kód vytvára a customComponents objekt, ktorý mapuje komponenty CustomOption a CustomDropdownIndicator na zodpovedajúce Možnosť a DropdownIndicator kľúče.

Nakoniec tento kód odovzdá objekt customComponents podporným komponentom komponentu Select. Tým sa vykreslí vybraný vstup s vlastnými komponentmi, ktorý vyzerá takto:

Štandardné komponenty môžu byť výkonnejšie a atraktívnejšie

React Select je výkonná knižnica, ktorá vám umožní vytvárať krásne a štýlové vybrané vstupy v Reacte. Môžete prispôsobiť vybrané vstupy, pridať k nim funkcie a vytvoriť vlastné rozbaľovacie komponenty. Využitím tejto knižnice môžete vylepšiť vzhľad a používateľskú skúsenosť svojich aplikácií React.