Vytvářejte krásné rozbalovací nabídky pomocí funkce React Select

Vytvářejte krásné rozbalovací nabídky pomocí funkce React Select
Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Výběrový vstup je užitečná komponenta webové aplikace, která vám umožňuje vybrat hodnotu z mnoha možností, aniž by zabírala mnoho místa. Výchozí styl však může být nudný a může být v rozporu se zbytkem vašeho návrhu.





MUO Video dne POKRAČOVÁNÍ V OBSAHU POKRAČUJTE PŘEJÍMÁNÍM

React Select poskytuje flexibilní a přizpůsobitelné řešení pro vylepšení vzhledu a funkčnosti rozevíracích vstupů.



Instalace React Select

Integrace Reactu s jinými knihovnami nebo technologiemi , jako React Select, React Redux a mnoho dalších, mohou zjednodušit proces vývoje.





Chcete-li začít s React Select, musíte jej nainstalovat do svého projektu. Na udělejte to pomocí npm , spusťte tento příkaz terminálu v adresáři projektu:

 npm i --save react-select

Tím se knihovna nainstaluje a nastaví ve vašem projektu React, takže ji můžete začít používat.



Vytváření Select Inputs pomocí React Select

Nyní, když jste knihovnu nastavili, můžete ji použít k vytváření vybraných vstupů. K tomu použijete Vybrat komponent. Jedná se o vysoce přizpůsobitelný komponent, který uživatelům umožňuje vybrat možnosti ze seznamu.

Zde je příklad použití komponenty 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

Tento příklad začíná importem souboru Vybrat součástka od “ reagovat-vybrat “. Definuje an možnosti pole se třemi objekty, každý s a hodnota a a označení vlastnictví. Vlastnost value představuje hodnotu, kterou formulář odešle do backendu, když jej odešlete. Vlastnost label je text, který komponenta Select zobrazí v rozevíracím seznamu.

Když vykreslíte komponentu Select, předejte jí pole voleb pomocí možnosti podpěra.



S tímto blokem kódu knihovna React Select vygeneruje rozevírací seznam takto:

Výchozí komponenta rozevíracího seznamu vykreslená knihovnou React Select

Přizpůsobení Select Inputs

React Select poskytuje různé způsoby přizpůsobení vybraných vstupů. Můžete použít třídy CSS nebo použít inline styly přímo na vybrané vstupy, podle vašich preferencí.

co je režim zmizení na Facebooku

Přizpůsobení pomocí tříd CSS

Knihovna React Select poskytuje a jméno třídy podpěra pro Vybrat komponent. Použijte tuto prop název třídy použít vlastní kaskádové styly (CSS) stylů do komponent Select.

Například:

 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

Blok kódu výše je podobný předchozímu, ale používá jméno třídy prop použít vlastní třídu CSS na Vybrat komponent. Zadejte název v podpěře className a můžete jej použít k aplikaci stylů CSS na komponentu:

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

Po definování stylů bude váš vybraný vstup vypadat takto:

Rozbalovací komponenta knihovny React Select stylizovaná pomocí className prop

Přizpůsobení pomocí inline stylů

Můžete také definovat vložené styly v objektu, který předáváte přes styly podpěra toho Vybrat komponent. Získáte tak větší kontrolu nad stylem jednotlivých prvků.

Zde je příklad:

 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

Objekt rekvizity, customStyles , obsahuje vlastnosti stylu pro komponentu Select řízení , volba , a Jídelní lístek díly. Tyto vlastnosti jsou funkce, které mají dva argumenty: základní styly a Stát .

Parametr baseStyles představuje výchozí styly poskytované React Select, zatímco parametr state představuje aktuální stav prvku. V tomto příkladu funkce používají operátor spread ke kombinaci základních stylů s dalšími styly pro každou část komponenty.

Po použití těchto stylů by váš vybraný vstup měl vypadat takto:

Rozbalovací komponenta knihovny React Select stylizovaná pomocí prop stylu

Přidání funkcí k vybraným vstupům

React Select poskytuje několik funkcí pro vylepšení funkčnosti vybraných vstupů. Můžete povolit vícenásobný výběr a funkci vyhledávání a dokonce vytvořit vlastní rozevírací komponenty.

Funkce vícenásobného výběru

Chcete-li povolit funkci vícenásobného výběru v rozbalovacích seznamech, předejte isMulti podpěra ke komponentě Select. To umožňuje uživatelům vybrat více možností z rozbalovací nabídky.

Například:

 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

Tento příklad ukazuje, jak používat isMulti pro přidání funkce vícenásobného výběru k vašim vybraným vstupům.

Rozbalovací komponenta knihovny React Select s funkcí vícenásobného výběru

Funkce vyhledávání

Knihovna React Select poskytuje vestavěnou funkci vyhledávání pro snadné filtrování možností. Ve výchozím nastavení komponenta Vybrat zobrazuje vstup vyhledávání, když otevřete rozevírací seznam. Uživatelé mohou zadat do vyhledávacího vstupu filtrovat dostupné možnosti.

Chcete-li povolit funkci vyhledávání, předejte isSearchable podpěra k Vybrat komponent. Jako isMulti prop, isSearchable přijímá booleovskou hodnotu.

Zde je příklad, jak použít prop isSearchable k aktivaci funkce vyhledávání:

 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

Vykreslení bloku kódu výše zobrazí výběrový vstup s funkcí vyhledávání. Bude vypadat a fungovat takto:

Rozbalovací komponenta knihovny React Select s funkcí vyhledávání

Vytvořte vlastní rozevírací komponenty

React Select vám umožňuje vytvářet vlastní rozevírací komponenty pomocí podpěry komponent. Můžete přepsat výchozí komponenty poskytované React Select a upravit vzhled a chování rozevíracího seznamu podle svého vkusu.

Například:

 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

Tento blok kódu ukazuje, jak vytvořit vlastní komponenty pro vybraný vstup pomocí komponenty podpěra toho Vybrat komponent. Dováží komponenty objekt, což je kolekce předdefinovaných komponent, které můžete použít k přizpůsobení vzhledu a chování různých prvků ve vybraných vstupech.

Kód definuje dvě funkční součásti: CustomOption a CustomDropdownIndicator . Komponenta CustomOption přebírá objekt jako parametr. Tento objekt obsahuje různé vlastnosti, které React Select poskytuje, např innerProps a označení .

Komponenta CustomDropdownIndicator trvá rekvizity jako parametr. Tato komponenta vykreslí vlastní rozevírací indikátor se symbolem šipky dolů. Kód vytvoří a customComponents objekt, který mapuje komponenty CustomOption a CustomDropdownIndicator na odpovídající Volba a DropdownIndicator klíče.

Nakonec tento kód předá objekt customComponents komponentě prop komponenty Select. Tím se vykreslí vybraný vstup s vlastními komponentami, který vypadá takto:

Vlastní rozevírací komponenta vykreslená knihovnou React Select

Standardní komponenty mohou být výkonnější a atraktivnější

React Select je výkonná knihovna, která vám umožní vytvářet krásné a stylové vybrané vstupy v Reactu. Vybrané vstupy můžete přizpůsobit, přidat k nim funkce a vytvořit vlastní rozevírací komponenty. Využitím této knihovny můžete vylepšit vzhled a uživatelskou zkušenost svých aplikací React.