Ustvarite čudovite spustne menije z React Select

Ustvarite čudovite spustne menije z React Select
Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Izbirni vnos je uporabna komponenta spletne aplikacije, ki vam omogoča, da izberete vrednost med številnimi možnostmi, ne da bi zavzeli veliko prostora. Toda privzeti stil je lahko dolgočasen in v nasprotju s preostalim dizajnom.





MUO Video dneva POMIKITE SE ZA NADALJEVANJE Z VSEBINO

React Select ponuja prilagodljivo in prilagodljivo rešitev za izboljšanje videza in funkcionalnosti spustnih vnosov.



Namestitev React Select

Integracija Reacta z drugimi knjižnicami ali tehnologijami , kot so React Select, React Redux in mnogi drugi, lahko poenostavijo razvojni proces.





v katerih trgovinah lahko uporabite paypal kredit?

Če želite začeti uporabljati React Select, ga morate namestiti v svoj projekt. Za naredite to z uporabo npm , zaženite ta terminalski ukaz v vašem imeniku projekta:

 npm i --save react-select

To bo namestilo in nastavilo knjižnico v vašem projektu React, tako da jo lahko začnete uporabljati.



Ustvarjanje izbranih vnosov z React Select

Zdaj, ko ste nastavili knjižnico, jo lahko uporabite za ustvarjanje izbranih vnosov. Če želite to narediti, boste uporabili Izberite komponento. To je zelo prilagodljiva komponenta, ki uporabnikom omogoča izbiro možnosti s seznama.

Tu je primer uporabe komponente Select:



 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

Ta primer se začne z uvozom Izberite komponenta iz ' reagiraj-izberi ”. Določa an opcije niz s tremi predmeti, vsak z a vrednost in a oznaka premoženje. Lastnost vrednosti predstavlja vrednost, ki jo bo obrazec poslal v zaledje, ko ga oddate. Lastnost label je besedilo, ki ga bo komponenta Select prikazala v spustnem meniju.

Ko upodabljate komponento Select, ji posredujte niz možnosti z uporabo opcije prop.



S tem blokom kode bo knjižnica React Select ustvarila spustni meni, kot je ta:

Privzeta spustna komponenta, ki jo upodobi knjižnica React Select

Prilagajanje izbranih vhodov

React Select ponuja različne načine prilagajanja izbranih vnosov. Uporabite lahko razrede CSS ali uporabite vgrajene sloge neposredno za izbrane vnose, glede na vaše želje.

Prilagajanje z razredi CSS

Knjižnica React Select ponuja a className rekvizit za Izberite komponento. Uporabite ta prop className za uporabo Cascading Style Sheet (CSS) po meri slogov v komponente Select.

Na primer:

 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

Zgornji blok kode je podoben prejšnjemu, vendar uporablja className prop za uporabo razreda CSS po meri za Izberite komponento. Podajte ime v prop className in ga lahko uporabite za uporabo slogov CSS za komponento:

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

Ko definirate sloge, bo vaš izbrani vnos videti takole:

Komponenta spustnega seznama knjižnice React Select, stilizirana z uporabo prop className

Prilagajanje z vgrajenimi slogi

Prav tako lahko definirate vgrajene sloge v predmetu, ki ga posredujete prek stilov rekvizit za Izberite komponento. Tako imate več nadzora nad slogom posameznih elementov.

Tukaj je primer:

 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

Predmet rekvizita, customStyles , vsebuje slogovne lastnosti za komponente Select nadzor , možnost , in meni deli. Te lastnosti so funkcije, ki sprejmejo dva argumenta: baseStyles in država .

Parameter baseStyles predstavlja privzete sloge, ki jih ponuja React Select, medtem ko parameter stanja predstavlja trenutno stanje elementa. V tem primeru funkcije uporabljajo operator spread za kombiniranje osnovnih slogov z dodatnimi slogi za vsak del komponente.

Po uporabi teh slogov bi moral vaš izbrani vnos izgledati takole:

Komponenta spustnega menija knjižnice React Select, oblikovana s pomočjo slogov

Dodajanje funkcionalnosti izbranim vhodom

React Select ponuja več funkcij za izboljšanje funkcionalnosti izbranih vnosov. Omogočite lahko funkcijo več izbir in iskanja ter celo ustvarite spustne komponente po meri.

Multi-Select Funkcionalnost

Če želite omogočiti funkcijo več izbir v spustnih menijih, prenesite isMulti prop na komponento Select. To uporabnikom omogoča izbiro več možnosti iz spustnega menija.

najti vse račune, povezane z mojim e -poštnim naslovom, brezplačno

Na primer:

 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

Ta primer prikazuje, kako uporabljati isMulti prop za dodajanje funkcije več izbir vašim izbranim vnosom.

Spustna komponenta knjižnice React Select s funkcijo več izbir

Funkcionalnost iskanja

Knjižnica React Select ponuja vgrajeno funkcijo iskanja za enostavno filtriranje možnosti. Privzeto komponenta Izberi prikaže iskalni vnos, ko odprete spustni meni. Uporabniki lahko vnesejo iskalni vnos za filtriranje razpoložljivih možnosti.

Če želite omogočiti funkcijo iskanja, prenesite isSearchable prop na Izberite komponento. Kot isMulti prop, isSearchable sprejme logično vrednost.

Tukaj je primer, kako uporabiti podlago isSearchable za omogočanje funkcije iskanja:

 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

Upodabljanje zgornjega bloka kode bo prikazalo izbrani vnos s funkcijo iskanja. Izgledalo in delovalo bo takole:

Spustna komponenta knjižnice React Select s funkcijo iskanja

Ustvarite spustne komponente po meri

React Select vam omogoča ustvarjanje spustnih komponent po meri z uporabo elementa komponent. Privzete komponente, ki jih ponuja React Select, lahko preglasite in prilagodite videz in obnašanje spustnega menija po svojem okusu.

Na primer:

 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>&darr;</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

Ta blok kode prikazuje, kako ustvariti komponente po meri za izbrani vnos z uporabo komponente rekvizit za Izberite komponento. Uvaža komponente objekt, ki je zbirka vnaprej določenih komponent, ki jih lahko uporabite za prilagajanje videza in obnašanja različnih elementov v izbranih vnosih.

Koda določa dve funkcionalni komponenti: CustomOption in Custom DropdownIndicator . Komponenta CustomOption vzame predmet kot parameter. Ta objekt vsebuje različne lastnosti, ki jih ponuja React Select, npr innerProps in oznaka .

Komponenta CustomDropdownIndicator zavzame rekviziti kot parameter. Ta komponenta upodobi spustni indikator po meri s simbolom puščice navzdol. Koda ustvari a customComponents objekt, ki preslika komponente CustomOption in CustomDropdownIndicator v ustrezne Možnost in Spustni indikator ključi.

Končno ta koda posreduje objekt customComponents v prop komponente komponente Select. To bo upodobil izbrani vnos s komponentami po meri, ki bo videti takole:

Komponenta spustnega menija po meri, ki jo upodobi knjižnica React Select

Standardne komponente so lahko zmogljivejše in privlačnejše

React Select je zmogljiva knjižnica, ki vam omogoča ustvarjanje čudovitih in elegantnih izbranih vnosov v Reactu. Izbrane vnose lahko prilagodite, jim dodate funkcionalnost in ustvarite spustne komponente po meri. Z izkoriščanjem prednosti te knjižnice lahko izboljšate videz in uporabniško izkušnjo svojih aplikacij React.