Hozzon létre gyönyörű legördülő listákat a React Select segítségével

A kiválasztott bemenet egy hasznos webalkalmazás-összetevő, amellyel számos lehetőség közül választhat értéket anélkül, hogy sok helyet foglalna. De az alapértelmezett stílus unalmas lehet, és ütközhet a terv többi részével.

A React Select rugalmas és testreszabható megoldást kínál a legördülő bemenetek megjelenésének és funkcionalitásának javítására.

A React Select telepítése

A React integrálása más könyvtárakkal vagy technológiákkal, mint például a React Select, a React Redux és még sok más, leegyszerűsítheti a fejlesztési folyamatot.

A React Select használatának megkezdéséhez telepítenie kell a projektbe. Nak nek tegye ezt az npm használatával, futtassa ezt a terminálparancsot a projektkönyvtárban:

npm i --save react-select

Ezzel telepíti és beállítja a könyvtárat a React projektben, így elkezdheti használni.

Select bemenetek létrehozása a React Select segítségével

Most, hogy beállította a könyvtárat, használhatja kiválasztott bemenetek létrehozására. Ehhez használja a

Válassza ki összetevő. Ez egy nagymértékben testreszabható összetevő, amely lehetővé teszi a felhasználók számára, hogy egy listából válasszanak ki lehetőségeket.

Íme egy példa a Select összetevő használatára:

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

Ez a példa a következő importálásával kezdődik Válassza ki komponens innen: "reagálni-választani”. Meghatározza egy lehetőségek tömb három objektummal, mindegyikben a érték és a címke ingatlan. A value tulajdonság azt az értéket képviseli, amelyet az űrlap elküld a háttérrendszernek, amikor elküldi. A címke tulajdonság az a szöveg, amelyet a Select összetevő a legördülő menüben jelenít meg.

Amikor megjeleníti a Select összetevőt, adja át neki a beállítások tömböt a segítségével lehetőségek támaszt.

Ezzel a kódblokkkal a React Select könyvtár egy ilyen legördülő listát generál:

A Select bemenetek testreszabása

A React Select különféle módokat kínál a kiválasztott bemenetek testreszabására. Használhat CSS-osztályokat, vagy alkalmazhat belső stílusokat közvetlenül a kiválasztott bemenetekre, ízlésének megfelelően.

Testreszabás CSS osztályokkal

A React Select könyvtár a osztály név kellék a Válassza ki összetevő. Használja ezt a className prop egyéni lépcsőzetes stíluslap (CSS) alkalmazása stílusokat a Select összetevőkhöz.

Például:

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

A fenti kódblokk hasonló az előzőhöz, de a osztály név javaslat egyéni CSS-osztály alkalmazásához a Válassza ki összetevő. Adjon meg egy nevet a className propban, és használja CSS-stílusok alkalmazására az összetevőre:

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

A stílusok meghatározása után a kiválasztott bemenet így fog kinézni:

Testreszabás beépített stílusokkal

Soron belüli stílusokat is meghatározhat egy objektumban, amelyet a következőn keresztül továbbít stílusok kelléke a Válassza ki összetevő. Így jobban szabályozhatja az egyes elemek stílusát.

Íme egy példa:

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

A kellék tárgy, egyéni stílusok, stílustulajdonságokat tartalmaz a Select összetevőhöz ellenőrzés, választási lehetőség, és menü alkatrészek. Ezek a tulajdonságok olyan függvények, amelyeknek két argumentuma van: baseStyles és állapot.

A baseStyles paraméter a React Select által biztosított alapértelmezett stílusokat, míg az állapotparaméter az elem aktuális állapotát jelöli. Ebben a példában a függvények a spread operátort használják a baseStyles extra stílusok kombinálására az összetevő minden egyes részéhez.

A stílusok alkalmazása után a kiválasztott bevitelnek így kell kinéznie:

Funkciók hozzáadása a Select bemenetekhez

A React Select számos funkciót kínál a kiválasztott bemenetek funkcionalitásának javítására. Engedélyezheti a többszörös kiválasztási és keresési funkciókat, és akár egyéni legördülő elemeket is létrehozhat.

Többfunkciós funkció

Ha engedélyezni szeretné a többszörös kijelölés funkciót a legördülő menükben, adja át a következőt: isMulti támaszkodjon a Select komponensre. Ez lehetővé teszi a felhasználók számára, hogy több opciót válasszanak a legördülő menüből.

Például:

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

Ez a példa bemutatja, hogyan kell használni a isMulti prop a multi-select funkció hozzáadásához a kiválasztott bemenetekhez.

Keresési funkciók

A React Select könyvtár beépített keresési funkciót biztosít az opciók egyszerű szűréséhez. Alapértelmezés szerint a Select összetevő megjeleníti a keresési bevitelt a legördülő menü megnyitásakor. A felhasználók beírhatják a keresési bevitelt a rendelkezésre álló lehetőségek szűréséhez.

A keresési funkció engedélyezéséhez adja át a Kereshető támasz a Válassza ki összetevő. Mint a isMulti prop, isSearchable logikai értéket fogad el.

Íme egy példa az isSearchable prop használatára a keresési funkciók engedélyezéséhez:

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

A fenti kódblokk megjelenítése egy kiválasztott bemenetet jelenít meg keresési funkcióval. Így fog kinézni és működni:

Hozzon létre egyéni legördülő összetevőket

A React Select lehetővé teszi egyéni legördülő komponensek létrehozását az összetevők prop segítségével. Felülbírálhatja a React Select által biztosított alapértelmezett összetevőket, és ízlésének megfelelően testreszabhatja a legördülő menü megjelenését és viselkedését.

Például:

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

Ez a kódblokk bemutatja, hogyan hozhat létre egyéni összetevőket egy kiválasztott bemenethez a alkatrészek kelléke a Válassza ki összetevő. Importálja a alkatrészek objektum, amely előre meghatározott komponensek gyűjteménye, amelyek segítségével testreszabhatja a kiválasztott bemenetek különböző elemeinek megjelenését és viselkedését.

A kód két funkcionális komponenst határoz meg: CustomOption és CustomDropdown Indicator. A CustomOption komponens egy objektumot vesz paraméterként. Ez az objektum különféle tulajdonságokat tartalmaz, amelyeket a React Select biztosít, például innerProps és címke.

A CustomDropdownIndicator komponens veszi kellékek paraméterként. Ez az összetevő egy egyéni legördülő menüt jelenít meg egy lefelé mutató nyíl szimbólummal. A kód létrehozza a customComponents objektum, amely leképezi a CustomOption és a CustomDropdownIndicator összetevőket a megfelelőre választási lehetőség és Legördülő menüjelző kulcsok.

Végül ez a kód átadja a customComponents objektumot a Select komponens összetevő-propójának. Ez egy kiválasztott bemenetet jelenít meg az egyéni összetevőkkel, így néz ki:

A szabványos alkatrészek erősebbek és vonzóbbak lehetnek

A React Select egy hatékony könyvtár, amellyel gyönyörű és stílusos kiválasztási bemeneteket hozhat létre a Reactban. Testreszabhatja a kiválasztott bemeneteket, funkciókat adhat hozzájuk, és egyéni legördülő összetevőket hozhat létre. A könyvtár előnyeit kihasználva javíthatja React alkalmazásai megjelenését és felhasználói élményét.