Luo kauniita avattavia valikoita React Selectillä

Valittu syöte on hyödyllinen verkkosovelluskomponentti, jonka avulla voit valita arvon useista vaihtoehdoista viemättä paljon tilaa. Mutta oletustyyli voi olla tylsä ​​ja olla ristiriidassa muun suunnittelusi kanssa.

React Select tarjoaa joustavan ja muokattavissa olevan ratkaisun, joka parantaa pudotusvalikon tulojen ulkonäköä ja toimivuutta.

React Selectin asentaminen

Reactin integrointi muihin kirjastoihin tai teknologioihin, kuten React Select, React Redux ja monet muut, voivat yksinkertaistaa kehitysprosessia.

Aloita React Selectin käyttö asentamalla se projektiisi. Vastaanottaja tee tämä käyttämällä npm, suorita tämä päätekomento projektihakemistossasi:

npm i --save react-select

Tämä asentaa ja määrittää kirjaston React-projektiisi, jotta voit aloittaa sen käytön.

Select-tulojen luominen React Selectillä

Nyt kun olet määrittänyt kirjaston, voit käyttää sitä valittujen tulojen luomiseen. Tätä varten käytät Valitse komponentti. Tämä on erittäin muokattavissa oleva komponentti, jonka avulla käyttäjät voivat valita vaihtoehtoja luettelosta.

Tässä on esimerkki Select-komponentin käytöstä:

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

Tämä esimerkki alkaa tuomalla Valitse komponentti kohteesta "reagoi-valitse”. Se määrittelee an vaihtoehtoja taulukko, jossa on kolme objektia, joista jokaisessa on a arvo ja a etiketti omaisuutta. Arvo-ominaisuus edustaa arvoa, jonka lomake lähettää taustajärjestelmään, kun lähetät sen. Tunnisteominaisuus on teksti, jonka Select-komponentti näyttää avattavassa valikossa.

Kun hahmonnat Select-komponentin, välitä sille asetustaulukko käyttämällä vaihtoehtoja prop.

Tällä koodilohkolla React Select -kirjasto luo seuraavanlaisen pudotusvalikon:

Valittujen tulojen mukauttaminen

React Select tarjoaa useita tapoja mukauttaa valittuja tuloja. Voit käyttää CSS-luokkia tai käyttää sisäisiä tyylejä suoraan valittuihin syötteisiin mieltymystesi mukaan.

Mukauttaminen CSS-luokilla

React Select -kirjasto tarjoaa a luokan nimi potkua varten Valitse komponentti. Käytä tätä className-prop soveltaa mukautettua CSS (Cascading Style Sheet) -tyylitaulukkoa tyylit Select-komponentteihin.

Esimerkiksi:

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

Yllä oleva koodilohko on samanlainen kuin edellinen, mutta se käyttää luokan nimi ehdotus mukautetun CSS-luokan käyttämiseksi Valitse komponentti. Anna nimi luokanName-ehdotukseen ja voit käyttää sitä CSS-tyylejen käyttämiseen komponenttiin:

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

Kun olet määrittänyt tyylit, valitsemasi syöttö näyttää tältä:

Mukauttaminen upotetuilla tyyleillä

Voit myös määrittää rivin sisäisiä tyylejä objektiin, jonka ohitat tyylejä prop of Valitse komponentti. Tämä antaa sinulle paremman hallinnan yksittäisten elementtien tyyliin.

Tässä on esimerkki:

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

Tukiobjekti, mukautettuja tyylejä, sisältää tyyliominaisuudet Select-komponentille ohjata, vaihtoehto, ja valikosta osat. Nämä ominaisuudet ovat funktioita, jotka käyttävät kaksi argumenttia: baseStyles ja osavaltio.

BaseStyles-parametri edustaa React Selectin tarjoamia oletustyylejä, kun taas tilaparametri edustaa elementin nykyistä tilaa. Tässä esimerkissä funktiot käyttävät levitysoperaattoria yhdistääkseen baseStyles-tyylit lisätyyleillä komponentin jokaiselle osalle.

Kun olet ottanut nämä tyylit käyttöön, valitsemasi syötteen pitäisi näyttää tältä:

Toimintojen lisääminen Select Input -tuloihin

React Select tarjoaa useita ominaisuuksia, jotka parantavat valittujen tulojen toimivuutta. Voit ottaa käyttöön monivalinta- ja hakutoiminnot ja jopa luoda mukautettuja pudotusvalikon osia.

Monivalintatoiminto

Ota monivalintatoiminto käyttöön avattavassa valikossa ohittamalla isMulti tuki Select-komponenttiin. Näin käyttäjät voivat valita useita vaihtoehtoja avattavasta valikosta.

Esimerkiksi:

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

Tämä esimerkki osoittaa, kuinka käyttää isMulti prop lisätäksesi monivalintatoiminnon valitsemiisi tuloihin.

Hakutoiminnot

React Select -kirjasto tarjoaa sisäänrakennetun hakutoiminnon vaihtoehtojen suodattamiseksi helposti. Oletusarvoisesti Valitse-komponentti näyttää hakusyötteen, kun avaat pudotusvalikon. Käyttäjät voivat suodattaa käytettävissä olevat vaihtoehdot kirjoittamalla hakusyötteen.

Ota hakutoiminto käyttöön ohittamalla on haettavissa tuki siihen Valitse komponentti. Kuin isMulti prop, isSearchable hyväksyy loogisen arvon.

Tässä on esimerkki siitä, kuinka isSearchable-pottia käytetään hakutoiminnon käyttöön ottamiseksi:

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

Yllä olevan koodilohkon renderöiminen näyttää valitun syötteen hakutoiminnolla. Se näyttää ja toimii tältä:

Luo mukautettuja pudotusvalikon komponentteja

React Select -toiminnolla voit luoda mukautettuja pudotusvalikon komponentteja käyttämällä komponenttien ehdotusta. Voit ohittaa React Selectin tarjoamat oletuskomponentit ja mukauttaa pudotusvalikon ulkoasua ja toimintaa makusi mukaan.

Esimerkiksi:

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

Tämä koodilohko näyttää kuinka luoda mukautettuja komponentteja valitulle tulolle käyttämällä komponentit prop of Valitse komponentti. Se tuo maahan komponentit objekti, joka on kokoelma ennalta määritettyjä komponentteja, joiden avulla voit mukauttaa eri elementtien ulkoasua ja käyttäytymistä valitsemissasi syötteissä.

Koodi määrittelee kaksi toiminnallista komponenttia: Mukautettu vaihtoehto ja CustomDropdown Indicator. CustomOption-komponentti ottaa objektin parametriksi. Tämä objekti sisältää erilaisia ​​ominaisuuksia, joita React Select tarjoaa, kuten innerProps ja etiketti.

CustomDropdownIndicator-komponentti kestää rekvisiitta parametrina. Tämä komponentti tuottaa mukautetun pudotusvalikon ilmaisimen, jossa on alaspäin osoittava nuoli. Koodi luo a mukautetut komponentit objekti, joka yhdistää CustomOption- ja CustomDropdownIndicator-komponentit vastaaviin Vaihtoehto ja Pudotusvalikon ilmaisin avaimet.

Lopuksi tämä koodi välittää customComponents-objektin Select-komponentin komponenttien ehdotukselle. Tämä tekee valitun syötteen mukautetuilla komponenteilla, joka näyttää tältä:

Vakiokomponentit voivat olla tehokkaampia ja houkuttelevampia

React Select on tehokas kirjasto, jonka avulla voit luoda kauniita ja tyylikkäitä valintatuloja Reactissa. Voit mukauttaa valittuja tuloja, lisätä niihin toimintoja ja luoda mukautettuja pudotusvalikon komponentteja. Hyödyntämällä tätä kirjastoa voit parantaa React-sovellustesi ulkonäköä ja käyttökokemusta.