Wie verwende ich Select2 mit Reactjs?

Question

Wie verwende ich Select2 mit Reactjs?

8

Ich habe abhängige Felder wie dieses

%Vor%

Wenn ich 5 <List/> components hatte. Wie füge ich Select2 zu jeder Komponente hinzu.Ich googelte online.Aber nicht finde eine funktionierende Lösung.

Code unten für react-select .Getting error TypeError: event. Das Ziel ist nicht definiert. .

%Vor%

javascript reactjs react-select select2

luboskrnac 03.02.2016, 11:56

quelle

3 Antworten

Tags und Links javascript reactjs react-select select2

Django: Verwenden von Annotate, Count und Distinct in einem Queryset ___ answer44257517 ___

für einfache Fälle: (ohne schrecklichen HTML-Gebrauch):

%Vor%

___ qstntxt ___

Ich habe eine %code% aus HTML generiert, die einige Links enthält. Die attributierte Zeichenfolge wird in einer UITextView angezeigt. Ich möchte einen anderen Schriftstil für die Links anwenden und setze dafür %code% . Ich habe %code% , %code% und %code% hinzugefügt. Aus irgendeinem Grund wird die Vordergrundfarbe angewendet, die restlichen Attribute jedoch nicht.

%Vor%

Hat jemand anderes damit zu tun gehabt und wie ändere ich den Schriftstil für Links, ohne inline CSS auf das ursprüngliche HTML anwenden zu müssen? Danke.

___ answer38577492 ___

Aus irgendeinem Grund funktioniert die Nachverarbeitung der zugewiesenen Zeichenfolge mit %code% nicht für mich.

Also habe ich %code% verwendet, um einen Link zu erkennen, und %code% , um meinen Stil für alle Links in einem String anzugeben. Hier ist meine Bearbeitungsfunktion:

%Vor%

___ answer41339092 ___

Es gibt auch eine einfache Möglichkeit, Stil für den Text anzuwenden, wenn Sie html verwenden - Sie können einfach den Stil innerhalb des HTML-Codes hinzufügen. Dann müssten Sie sich keine Gedanken über das Festlegen von Attributen für den Text machen. Zum Beispiel:

%Vor%

___ answer42884528 ___

Dies ist eine schnelle 3 Aktualisierung der Antwort oben von @Arun Ammannaya

%Vor%

Dies ist eine Swift 3-Lösung für @CTiPKA, die ich bevorzuge, da sie HTML vermeidet

%Vor%

___ tag123nasattributedstring ___ NSAttributedString-Objekte verwalten Zeichenfolgen und zugehörige Attributsätze (z. B. Schriftart und Unterschneidung), die für einzelne Zeichen oder Zeichenbereiche in der Zeichenfolge gelten. Eine Verknüpfung von Zeichen und ihren Attributen wird als attributierte Zeichenfolge bezeichnet. ___ answer35059429 ___

Nicht sicher, warum linkTextAttributes nicht für den Namen der Schriftart funktioniert. Aber wir können dies erreichen, indem wir die Verbindungsattribute des NSAttributedString aktualisieren. Überprüfen Sie den folgenden Code.

%Vor%

Dies ist der Ziel-C Code dafür:

%Vor%

___ tag123uitextview ___ Die UITextView-Klasse implementiert das Verhalten für eine bildlauffähige, mehrzeilige Textregion in iOS. Die Klasse unterstützt die Anzeige von Text mit einer benutzerdefinierten Schriftart, Farbe und Ausrichtung und unterstützt auch die Textbearbeitung. In der Regel verwenden Sie eine Textansicht, um mehrere Textzeilen anzuzeigen, z. B. wenn Sie den Textkörper eines großen Textdokuments anzeigen. ___ tag123swift ___ Swift ist eine universelle Open-Source-Programmiersprache, die von Apple Inc. für ihre Plattformen und Linux entwickelt wurde. Verwenden Sie das Tag nur für Fragen zu Sprachfunktionen oder für Code in Swift. Verwenden Sie die Tags [ios], [osx], [watch-os], [tvos], [cocoa-touch] und [cocoa] für (sprachunabhängige) Fragen zu den Plattformen oder Frameworks. ___

score 10 · Answer 1

Wir verwenden diesen Wrapper , aber es gibt zu viele Probleme.

Zunächst können Sie den Code in NodeJS nicht testen, da dieses Problem vorliegt . Zweitens hatten wir Probleme mit der Initialisierung verschiedener select2-Komponenten über defaultValue -Parameter. Nur eines (zufällig) dieser Elemente wurde initialisiert.

Deshalb werden wir es dumpen und durch react-select bald ersetzen.

BEARBEITEN: Wir haben react-select2-wrapper durch react-select ersetzt. Es funktioniert gut für uns.

score 5 · Answer 2

5

Da Sie React verwenden, sollten Sie lieber nach React-Komponenten als nach jQuery-Plugins suchen. Sie können für react-select verwenden, was Select2 sehr ähnlich ist.

mik01aj 03.02.2016 12:16

quelle

score 5 · Answer 3

Wenn Sie refs [docs] verwenden, können Sie darauf zugreifen der Knoten über sein refs -Attribut in der componentDidMount -Funktion und übergibt das an select2() :

%Vor%

Ich glaube nicht, dass dies der "Reactive Way" ist, aber das kann hilfreich sein, wenn Sie react-select oder ein anderes Tool nicht verwenden möchten.