Ożyw swoje nudne menu dzięki tej elastycznej bibliotece React.
Wybór danych wejściowych to przydatny komponent aplikacji internetowej, który umożliwia wybranie wartości z wielu opcji bez zajmowania dużej ilości miejsca. Jednak domyślna stylizacja może być nudna i kolidować z resztą projektu.
React Select zapewnia elastyczne i konfigurowalne rozwiązanie poprawiające wygląd i funkcjonalność rozwijanych wejść.
Instalowanie React Select
Integracja Reacta z innymi bibliotekami lub technologiami, takie jak React Select, React Redux i wiele innych, mogą uprościć proces programowania.
Aby rozpocząć korzystanie z React Select, musisz zainstalować go w swoim projekcie. Do zrób to za pomocą npm, uruchom tę komendę terminala w katalogu projektu:
npm i --save react-select
Spowoduje to zainstalowanie i skonfigurowanie biblioteki w Twoim projekcie React, dzięki czemu będziesz mógł zacząć z niej korzystać.
Tworzenie wejść Select za pomocą React Select
Teraz, gdy masz już skonfigurowaną bibliotekę, możesz jej użyć do utworzenia wybranych danych wejściowych. Aby to zrobić, użyjesz
Wybierać część. Jest to wysoce konfigurowalny komponent, który pozwala użytkownikom wybierać opcje z listy.Oto przykład użycia komponentu 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
Ten przykład rozpoczyna się od zaimportowania pliku Wybierać składnik z „reaguj-wybierz”. Definiuje opcje tablica z trzema obiektami, każdy z a wartość i a etykieta nieruchomość. Właściwość value reprezentuje wartość, którą formularz wyśle do backendu po jego przesłaniu. Właściwość label to tekst, który komponent Select będzie wyświetlany na liście rozwijanej.
Kiedy renderujesz komponent Select, przekaż do niego tablicę opcji za pomocą metody opcje rekwizyt.
Dzięki temu blokowi kodu biblioteka React Select wygeneruje listę rozwijaną w następujący sposób:
Dostosowywanie wybranych wejść
React Select zapewnia różne sposoby dostosowywania wybranych wejść. Możesz użyć klas CSS lub zastosować style wbudowane bezpośrednio do wybranych danych wejściowych, zgodnie ze swoimi preferencjami.
Dostosowywanie za pomocą klas CSS
Biblioteka React Select udostępnia m.in Nazwa klasy podpora dla Wybierać część. Użyj tej właściwości className aby zastosować niestandardowy arkusz stylów kaskadowych (CSS) style do wybranych komponentów.
Na przykład:
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 (
exportdefault App
Powyższy blok kodu jest podobny do poprzedniego, ale używa Nazwa klasy prop, aby zastosować niestandardową klasę CSS do pliku Wybierać część. Podaj nazwę we właściwości className i możesz jej użyć do zastosowania stylów CSS do komponentu:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Po zdefiniowaniu stylów wybrane dane wejściowe będą wyglądać następująco:
Dostosowywanie za pomocą stylów wbudowanych
Możesz także zdefiniować style wbudowane w obiekcie, który przechodzisz przez style podpora Wybierać część. Daje to większą kontrolę nad stylem poszczególnych elementów.
Oto przykład:
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
Obiekt rekwizytowy, niestandardoweStyle, zawiera właściwości stylu dla komponentu Wybierz kontrola, opcja, I menu Części. Te właściwości są funkcjami, które przyjmują dwa argumenty: style bazowe I państwo.
Parametr baseStyles reprezentuje domyślne style udostępniane przez React Select, natomiast parametr state reprezentuje bieżący stan elementu. W tym przykładzie funkcje używają operatora spreadu w celu połączenia stylów podstawowych z dodatkowymi stylami dla każdej części komponentu.
Po zastosowaniu tych stylów wybrane dane wejściowe powinny wyglądać następująco:
Dodawanie funkcjonalności do wybranych wejść
React Select udostępnia kilka funkcji zwiększających funkcjonalność wybranych wejść. Możesz włączyć funkcję wielokrotnego wyboru i wyszukiwania, a nawet utworzyć niestandardowe komponenty rozwijane.
Funkcjonalność wielokrotnego wyboru
Aby włączyć funkcję wielokrotnego wyboru w menu rozwijanym, przekaż jestMulti prop do komponentu Select. Dzięki temu użytkownicy mogą wybierać wiele opcji z menu rozwijanego.
Na przykład:
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
Ten przykład pokazuje, jak używać jestMulti prop, aby dodać funkcję wielokrotnego wyboru do wybranych wejść.
Funkcjonalność wyszukiwania
Biblioteka React Select zapewnia wbudowaną funkcję wyszukiwania umożliwiającą łatwe filtrowanie opcji. Domyślnie komponent Wybierz wyświetla dane wejściowe wyszukiwania po otwarciu menu rozwijanego. Użytkownicy mogą wpisać dane wejściowe wyszukiwania, aby przefiltrować dostępne opcje.
Aby włączyć funkcję wyszukiwania, przekaż można przeszukiwać podeprzyj do Wybierać część. Jak jestMulti prop, isSearchable akceptuje wartość logiczną.
Oto przykład użycia właściwości isSearchable w celu włączenia funkcji wyszukiwania:
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
Renderowanie powyższego bloku kodu spowoduje wyświetlenie wybranych danych wejściowych z funkcją wyszukiwania. Będzie wyglądać i działać następująco:
Utwórz niestandardowe komponenty listy rozwijanej
React Select umożliwia tworzenie niestandardowych komponentów rozwijanych za pomocą komponentu prop. Możesz zastąpić domyślne komponenty dostarczone przez React Select i dostosować wygląd i zachowanie menu rozwijanego do własnych upodobań.
Na przykład:
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
Ten blok kodu pokazuje, jak tworzyć niestandardowe komponenty dla wybranych danych wejściowych za pomocą składniki podpora Wybierać część. Importuje składniki obiekt będący zbiorem predefiniowanych komponentów, których można użyć do dostosowania wyglądu i zachowania różnych elementów w wybranych danych wejściowych.
Kod definiuje dwa komponenty funkcjonalne: Opcja niestandardowa I Niestandardowy wskaźnik rozwijania. Komponent CustomOption przyjmuje obiekt jako parametr. Obiekt ten zawiera różne właściwości udostępniane przez React Select, np wewnętrzneRekwizyty I etykieta.
Składnik CustomDropdownIndicator przyjmuje rekwizyty jako parametr. Ten komponent renderuje niestandardowy wskaźnik listy rozwijanej z symbolem strzałki w dół. Kod tworzy niestandardowe komponenty obiekt, który mapuje składniki CustomOption i CustomDropdownIndicator na odpowiednie Opcja I Wskaźnik rozwijania Klucze.
Na koniec ten kod przekazuje obiekt customComponents do właściwości komponentu komponentu Select. Spowoduje to wyrenderowanie wybranych danych wejściowych z niestandardowymi komponentami, wyglądającymi tak:
Standardowe komponenty mogą być mocniejsze i atrakcyjniejsze
React Select to potężna biblioteka, która pozwala tworzyć piękne i stylowe wybrane dane wejściowe w React. Możesz dostosować wybrane dane wejściowe, dodać do nich funkcjonalność i utworzyć niestandardowe komponenty listy rozwijanej. Korzystając z tej biblioteki, możesz poprawić wygląd i wygodę użytkowania swoich aplikacji React.