Die Auswahl der Steuerung für React. Ursprünglich für den Einsatz in Keystonejs gebaut.
Siehe React-Select.com für Live-Demos und umfassende Dokumente.
react-select wird von Thinkmill und Atlassian finanziert. Wir sind ein Open -Source -Projekt, das von der Community kontinuierlich unterstützt wird.
React Select hilft Ihnen, leistungsstarke ausgewählte Komponenten zu entwickeln, die einfach nicht in der Box funktionieren , ohne Sie daran zu hindern, die für Sie wichtigen Teile anzupassen.
Für die Geschichte hinter dieser Komponente sehen Sie Jeds Gespräch bei React Conf 2019 - Building React Select an
Zu den Funktionen gehören:
Der einfachste Weg, React-Select zu verwenden, besteht darin, sie von NPM aus zu installieren und mit WebPack in Ihre App aufzubauen.
yarn add react-select
Dann verwenden Sie es in Ihrer App:
import React , { useState } from 'react' ;
import Select from 'react-select' ;
const options = [
{ value : 'chocolate' , label : 'Chocolate' } ,
{ value : 'strawberry' , label : 'Strawberry' } ,
{ value : 'vanilla' , label : 'Vanilla' } ,
] ;
export default function App ( ) {
const [ selectedOption , setSelectedOption ] = useState ( null ) ;
return (
< div className = "App" >
< Select
defaultValue = { selectedOption }
onChange = { setSelectedOption }
options = { options }
/ >
< / div >
) ;
} Gemeinsame Requisiten, die Sie möglicherweise angeben möchten, umfassen:
autoFocus - Fokus die Kontrolle, wenn sie montiertclassName - Wenden Sie einen Klassennamen auf die Kontrolle anclassNamePrefix - Anwenden Sie Klassennamen auf innere Elemente mit dem angegebenen Präfix anisDisabled - Deaktivieren Sie die KontrolleisMulti - Ermöglichen Sie dem Benutzer, mehrere Werte auszuwählenisSearchable - Ermöglichen Sie dem Benutzer, nach übereinstimmenden Optionen zu suchenname - Generieren Sie eine HTML -Eingabe mit diesem Namen, der den aktuellen Wert enthältonChange - Abonnieren Sie Änderungenereignisseoptions - Geben Sie die Optionen an, aus denen der Benutzer auswählen kannplaceholder - Ändern Sie den angezeigten Text, wenn keine Option ausgewählt istnoOptionsMessage - ({inputValue: String}) => String | NULL - Text zum Anzeigen, wenn es keine Optionen gibtvalue - steuern Sie den aktuellen WertIn der Dokumentation der Props finden Sie eine vollständige Dokumentation zu den React-Select-Unterstützung.
Sie können die folgenden Requisiten steuern, indem Sie Werte für sie bereitstellen. Wenn Sie dies nicht tun, verwaltet React-Select sie für Sie.
value / onChange - Geben Sie den aktuellen Wert der Steuerung anmenuIsOpen / onMenuOpen / onMenuClose - Steuer, ob das Menü geöffnet istinputValue / onInputChange - Steuern Sie den Wert der Sucheingabe (Ändern Sie dies aktualisieren die verfügbaren Optionen).Wenn Sie diese Requisiten nicht angeben, können Sie den Anfangswert des von ihm kontrollierten Zustands festlegen:
defaultValue - Legen Sie den Anfangswert der Steuerung festdefaultMenuIsOpen - Setzen Sie den ersten geöffneten Wert des MenüsdefaultInputValue - Setzen Sie den Anfangswert der Sucheingabe React-Select enthüllt zwei öffentliche Methoden:
focus() - Fokus auf die Kontrolle programmgesteuertblur() - die Steuerung programmatisch verwischen Weitere Informationen finden Sie in den Dokumenten:
Die V5 -Version stellt ein Umschreiben von JavaScript zu Typscript dar. Die Typen für V4 und frühere Veröffentlichungen sind unter @types erhältlich. In der TypeScript -Anleitung finden Sie die Art und Weise, wie die Typen mit V5 verwendet werden.
Vielen Dank an alle, die zu diesem Projekt beigetragen haben. Es war eine wilde Fahrt.
Wenn Sie React Select mögen, sollten Sie mir auf Twitter folgen!
Rufe Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Emma Hamilton, Dave Brotherstone, Brian Vaughn und das Atlassian Design -Systemteam, das zusammen mit vielen anderen Mitwirkenden dies möglich gemacht hat.
MIT lizenziert. Copyright (C) Jed Watson 2022.
