Home-theater-designers
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 nap MUO videója GÖRGÖZSEN A TARTALOM FOLYTATÁSHOZ
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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default 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.
hogyan lehet blokkolni az átverést, valószínűleg hívja az iphone -t
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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default 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"
function App() {
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>
<Select options={options} styles={customStyles} />
</div>
)
}
export default 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 .
kell -e router és modem?
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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti />
</div>
)
}
export default 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"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default 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"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default 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.