Maak prachtige vervolgkeuzelijsten met React Select

Een selectie-invoer is een handig webapp-onderdeel waarmee u een waarde uit vele opties kunt kiezen zonder veel ruimte in beslag te nemen. Maar de standaardstijl kan saai zijn en botsen met de rest van uw ontwerp.

React Select biedt een flexibele en aanpasbare oplossing om het uiterlijk en de functionaliteit van vervolgkeuzemenu's te verbeteren.

ReactSelect installeren

React integreren met andere bibliotheken of technologieën, zoals React Select, React Redux en nog veel meer, kunnen het ontwikkelingsproces vereenvoudigen.

Om aan de slag te gaan met React Select, moet u het in uw project installeren. Naar doe dit met behulp van npm, voer deze terminalopdracht uit in uw projectmap:

npm i --save react-select

Hiermee wordt de bibliotheek in uw React-project geïnstalleerd en ingesteld, zodat u deze kunt gaan gebruiken.

Select-ingangen creëren met React Select

Nu u de bibliotheek hebt ingesteld, kunt u deze gebruiken om geselecteerde invoer te maken. Om dit te doen, maakt u gebruik van de

Selecteer bestanddeel. Dit is een zeer aanpasbare component waarmee gebruikers opties uit een lijst kunnen selecteren.

Hier is een voorbeeld van hoe u de component Select gebruikt:

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

Dit voorbeeld begint met het importeren van het Selecteer onderdeel van “reageren-selecteren”. Het definieert een opties array met drie objecten, elk met een waarde en een etiket eigendom. De waarde-eigenschap vertegenwoordigt de waarde die het formulier naar de backend verzendt wanneer u het verzendt. De eigenschap label is de tekst die de Select-component in de vervolgkeuzelijst weergeeft.

Wanneer u de Select-component rendert, geeft u de optiematrix eraan door met behulp van de opties prop.

Met dit codeblok genereert de React Select-bibliotheek een vervolgkeuzelijst als deze:

De geselecteerde ingangen aanpassen

React Select biedt verschillende manieren om de geselecteerde ingangen aan te passen. U kunt CSS-klassen gebruiken of inline-stijlen rechtstreeks op de geselecteerde invoer toepassen, afhankelijk van uw voorkeuren.

Aanpassen met CSS-klassen

De React Select-bibliotheek biedt een naam van de klasse steun voor de Selecteer bestanddeel. Gebruik deze className-prop aangepaste Cascading Style Sheet (CSS) toepassen stijlen toe aan uw Select-componenten.

Bijvoorbeeld:

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

Het bovenstaande codeblok is vergelijkbaar met het vorige, maar gebruikt de naam van de klasse prop om een ​​aangepaste CSS-klasse toe te passen op de Selecteer bestanddeel. Geef een naam op in de className prop en u kunt deze gebruiken om CSS-stijlen op de component toe te passen:

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

Nadat u de stijlen hebt gedefinieerd, ziet uw geselecteerde invoer er als volgt uit:

Aanpassen met inlinestijlen

U kunt ook inline-stijlen definiëren in een object dat u via de stijlen prop van de Selecteer bestanddeel. Hierdoor heb je meer controle over de stijl van individuele elementen.

Hier is een voorbeeld:

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

Het prop-object, aangepaste stijlen, bevat stijleigenschappen voor de Select-component controle, keuze, En menu onderdelen. Deze eigenschappen zijn functies waaraan twee argumenten moeten doorgegeven worden: basisstijlen En staat.

De parameter baseStyles vertegenwoordigt de standaardstijlen die door React Select worden geleverd, terwijl de parameter state de huidige status van het element vertegenwoordigt. In dit voorbeeld gebruiken de functies de spread-operator om de baseStyles te combineren met extra stijlen voor elk deel van de component.

Nadat u deze stijlen hebt toegepast, zou uw geselecteerde invoer er als volgt uit moeten zien:

Functionaliteit toevoegen aan de geselecteerde ingangen

React Select biedt verschillende functies om de functionaliteit van geselecteerde ingangen te verbeteren. U kunt multi-select- en zoekfunctionaliteit inschakelen en zelfs aangepaste vervolgkeuzelijstcomponenten maken.

Multi-Select-functionaliteit

Om de functionaliteit voor meerdere selecties in uw vervolgkeuzelijsten in te schakelen, geeft u de isMulti prop aan de Select-component. Hierdoor kunnen gebruikers meerdere opties selecteren in het vervolgkeuzemenu.

Bijvoorbeeld:

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

Dit voorbeeld laat zien hoe u de isMulti prop om de multi-select-functionaliteit toe te voegen aan uw geselecteerde invoer.

Zoekfunctionaliteit

De React Select-bibliotheek biedt ingebouwde zoekfunctionaliteit om opties eenvoudig te filteren. Standaard geeft de component Selecteren de zoekinvoer weer wanneer u de vervolgkeuzelijst opent. Gebruikers kunnen de zoekinvoer typen om de beschikbare opties te filteren.

Om de zoekfunctionaliteit in te schakelen, geeft u de is doorzoekbaar prop voor de Selecteer bestanddeel. Zoals de isMulti prop, isSearchable accepteert een Booleaanse waarde.

Hier is een voorbeeld van hoe u de prop isSearchable gebruikt om de zoekfunctionaliteit in te schakelen:

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

Als u het bovenstaande codeblok weergeeft, wordt een geselecteerde invoer met zoekfunctionaliteit weergegeven. Het zal er als volgt uitzien en functioneren:

Maak aangepaste dropdown-componenten

Met React Select kunt u aangepaste vervolgkeuzelijstcomponenten maken met behulp van de componenten prop. U kunt de standaardcomponenten van React Select overschrijven en het uiterlijk en gedrag van de vervolgkeuzelijst aanpassen aan uw smaak.

Bijvoorbeeld:

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

Dit codeblok laat zien hoe u aangepaste componenten maakt voor een geselecteerde invoer met behulp van de componenten prop van de Selecteer bestanddeel. Het importeert de componenten object, een verzameling vooraf gedefinieerde componenten die u kunt gebruiken om het uiterlijk en het gedrag van verschillende elementen in uw geselecteerde invoer aan te passen.

De code definieert twee functionele componenten: Aangepaste optie En AangepasteDropdownIndicator. De component CustomOption neemt een object als parameter. Dit object bevat verschillende eigenschappen die React Select biedt, zoals innerlijkeProps En etiket.

De component CustomDropdownIndicator neemt rekwisieten als parameter. Deze component geeft een aangepaste vervolgkeuzelijst weer met een neerwaarts pijlsymbool. De code maakt een aangepasteComponenten object dat de componenten CustomOption en CustomDropdownIndicator toewijst aan de overeenkomstige Keuze En DropdownIndicator sleutels.

Ten slotte geeft deze code het customComponents-object door aan de componenten prop van de Select-component. Hierdoor wordt een geselecteerde invoer weergegeven met de aangepaste componenten, die er als volgt uitziet:

Standaardcomponenten kunnen krachtiger en aantrekkelijker zijn

React Select is een krachtige bibliotheek waarmee u prachtige en stijlvolle geselecteerde ingangen kunt creëren in React. U kunt de geselecteerde invoer aanpassen, er functionaliteit aan toevoegen en aangepaste vervolgkeuzelijsten maken. Door gebruik te maken van deze bibliotheek kunt u het uiterlijk en de gebruikerservaring van uw React-apps verbeteren.