Sukurkite gražius išskleidžiamuosius meniu naudodami „React Select“.

Pasirinkta įvestis yra naudingas žiniatinklio programos komponentas, leidžiantis pasirinkti vertę iš daugelio parinkčių neužimant daug vietos. Tačiau numatytasis stilius gali būti nuobodus ir prieštarauti likusiam jūsų dizainui.

„React Select“ suteikia lankstų ir pritaikomą sprendimą, kuris pagerina išskleidžiamojo meniu įvesties išvaizdą ir funkcionalumą.

„React Select“ diegimas

„React“ integravimas su kitomis bibliotekomis ar technologijomis, kaip „React Select“, „React Redux“ ir daugelis kitų, gali supaprastinti kūrimo procesą.

Norėdami pradėti naudoti „React Select“, turite jį įdiegti savo projekte. Į padarykite tai naudodami npm, paleiskite šią terminalo komandą savo projekto kataloge:

npm i --save react-select

Taip bus įdiegta ir nustatyta biblioteka jūsų React projekte, kad galėtumėte pradėti ją naudoti.

Atrankos įėjimų kūrimas naudojant „React Select“.

Dabar, kai nustatėte biblioteką, galite naudoti ją pasirinktoms įvestims kurti. Norėdami tai padaryti, naudosite

Pasirinkite komponentas. Tai labai pritaikomas komponentas, leidžiantis vartotojams pasirinkti parinktis iš sąrašo.

Štai pavyzdys, kaip naudoti komponentą Select:

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

Šis pavyzdys prasideda importuojant Pasirinkite komponentas iš "reaguoti-pasirinkti”. Jis apibrėžia an galimybės masyvas su trimis objektais, kurių kiekvienas turi a vertė ir a etiketė nuosavybė. Ypatybė vertė nurodo vertę, kurią forma išsiųs į užpakalinę programą, kai ją pateiksite. Etiketės ypatybė yra tekstas, kurį išskleidžiamajame meniu rodys komponentas Select.

Kai pateikiate Select komponentą, perduokite jam parinkčių masyvą naudodami galimybės prop.

Naudojant šį kodo bloką, „React Select“ biblioteka sugeneruos tokį išskleidžiamąjį meniu:

Pasirinkti įvestis tinkinimas

„React Select“ suteikia įvairių būdų, kaip tinkinti pasirinktas įvestis. Galite naudoti CSS klases arba tiesiogiai taikyti eilutinius stilius pasirinktoms įvestims pagal savo pageidavimus.

Tinkinimas naudojant CSS klases

„React Select“ biblioteka suteikia a klasės pavadinimas rekvizitas Pasirinkite komponentas. Naudokite šį klasės pavadinimo pasiūlymą pritaikyti tinkintą pakopinio stiliaus lapą (CSS) stilius į jūsų Select komponentus.

Pavyzdžiui:

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

Aukščiau pateiktas kodo blokas yra panašus į ankstesnį, tačiau jame naudojamas klasės pavadinimas pasiūlymas pritaikyti tinkintą CSS klasę Pasirinkite komponentas. Pateikite pavadinimą „className“ pasiūlyme ir galėsite jį naudoti CSS stiliams pritaikyti komponentui:

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

Apibrėžus stilius, pasirinkta įvestis atrodys taip:

Tinkinimas naudojant įtrauktus stilius

Taip pat galite apibrėžti eilutinius stilius objekte, kurį perduodate per stiliai rekvizitas Pasirinkite komponentas. Tai leidžia geriau valdyti atskirų elementų stilių.

Štai pavyzdys:

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

Rekvizitas objektas, pasirinktiniai stiliai, yra pasirinkimo komponento stiliaus ypatybės kontrolė, variantas, ir Meniu dalys. Šios savybės yra funkcijos, kurios turi du argumentus: baziniai stiliai ir valstybė.

Parametras baseStyles nurodo numatytuosius stilius, pateiktus „React Select“, o būsenos parametras – dabartinę elemento būseną. Šiame pavyzdyje funkcijos naudoja sklaidos operatorių, kad sujungtų baseStyles su papildomais stiliais kiekvienai komponento daliai.

Pritaikius šiuos stilius, pasirinkta įvestis turėtų atrodyti taip:

Funkcionalumo pridėjimas prie pasirinktų įėjimų

„React Select“ suteikia keletą funkcijų, kurios pagerina pasirinktų įėjimų funkcionalumą. Galite įjungti kelių pasirinkimų ir paieškos funkcijas ir netgi sukurti pasirinktinius išskleidžiamuosius komponentus.

Kelių pasirinkimų funkcionalumas

Norėdami įgalinti kelių pasirinkimų funkciją išskleidžiamajame meniu, perduokite isMulti remtis komponentu Select. Tai leidžia vartotojams išskleidžiamajame meniu pasirinkti kelias parinktis.

Pavyzdžiui:

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

Šis pavyzdys parodo, kaip naudoti isMulti rekvizitas, kad prie pasirinktų įėjimų pridėtumėte kelių pasirinkimų funkciją.

Paieškos funkcionalumas

„React Select“ bibliotekoje yra integruota paieškos funkcija, leidžianti lengvai filtruoti parinktis. Pagal numatytuosius nustatymus, kai atidarote išskleidžiamąjį meniu, komponentas Select rodo paieškos įvestį. Vartotojai gali įvesti paieškos įvestį, norėdami filtruoti galimas parinktis.

Norėdami įjungti paieškos funkciją, perduokite yra Ieškoma atrama prie Pasirinkite komponentas. Kaip isMulti prop, isSearchable priima loginę reikšmę.

Štai pavyzdys, kaip naudoti „isSearchable“ rekviziją, kad įgalintumėte paieškos funkciją:

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

Pateikus aukščiau esantį kodo bloką, bus rodoma pasirinkta įvestis su paieškos funkcija. Jis atrodys ir veiks taip:

Sukurkite pasirinktinius išskleidžiamojo meniu komponentus

React Select leidžia kurti pasirinktinius išskleidžiamuosius komponentus naudojant komponentų rekvizitus. Galite nepaisyti numatytųjų komponentų, kuriuos teikia „React Select“, ir tinkinti išskleidžiamojo meniu išvaizdą bei veikimą pagal savo skonį.

Pavyzdžiui:

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

Šiame kodo bloke parodyta, kaip sukurti pasirinktinius pasirinktos įvesties komponentus naudojant komponentai rekvizitas Pasirinkite komponentas. Ji importuoja komponentai objektas, kuris yra iš anksto nustatytų komponentų rinkinys, kurį galite naudoti norėdami tinkinti įvairių pasirinktų įvesties elementų išvaizdą ir elgesį.

Kodas apibrėžia du funkcinius komponentus: CustomOption ir Custom Dropdown Indicator. „CustomOption“ komponentas paima objektą kaip parametrą. Šiame objekte yra įvairių savybių, kurias suteikia „React Select“, pvz., vidinis rekvizitas ir etiketė.

„CustomDropdownIndicator“ komponentas užtrunka rekvizitai kaip parametras. Šis komponentas pateikia pasirinktinį išskleidžiamąjį indikatorių su rodyklės žemyn simboliu. Kodas sukuria a pasirinktiniai komponentai objektas, susiejantis „CustomOption“ ir „CustomDropdownIndicator“ komponentus su atitinkamu Variantas ir Išskleidžiamojo meniu indikatorius raktai.

Galiausiai šis kodas perduoda objektą customComponents į komponento Select komponento rekvizitus. Tai pateiks pasirinktą įvestį su pasirinktiniais komponentais, atrodys taip:

Standartiniai komponentai gali būti galingesni ir patrauklesni

„React Select“ yra galinga biblioteka, leidžianti kurti gražius ir stilingus „React“ pasirinkimo įvestis. Galite tinkinti pasirinktas įvestis, pridėti prie jų funkcijų ir kurti pasirinktinius išskleidžiamuosius komponentus. Pasinaudodami šios bibliotekos pranašumais galite pagerinti savo „React“ programų išvaizdą ir vartotojo patirtį.