React-Semantic-UI und Redux-Form integrieren

7

Ich benutze redux-form (tolle libs) um mit meinem form & amp; redux Speichern Sie in Reagieren App. Alles funktioniert gut, wichtige Formulare und verschachtelte json-Ausgabe.

Ich versuche, React-Semantic-UI Komponente mit redux-form zu verwenden. Ich suchte in den Dokumenten, wie über benutzerdefinierte Komponente mit redux Form integrieren, und hier gehen wir: Ссылка Scheint perfekt.

Aber wenn ich Semantic integriere, funktioniert es.

Dies ist mein einfacher Test mit Pseudocode:

%Vor%

und hier meine CustomComponent mit Dropdown. Sie können die Dropdown-Dokumentation & amp; Requisiten (onChange & amp; Wert) hier:

Ссылка

%Vor%

Wie in der Dokumentation, fügte ich Wert & amp; onChange Requisiten auf meiner benutzerdefinierten Komponente.

Ich vermisse hier eindeutig etwas. Hat jemand ein einfaches Beispiel mit Redux-Form und Semantc-Ui?

Danke für Ihre Hilfe.

    
GreGGus 08.02.2017, 15:52
quelle

2 Antworten

22

Ok, ich habe Erfolg:

Um React Semantic Dropdown zu verwenden, ist dies ein einfaches Beispiel:

%Vor%

Und alles funktioniert großartig. Sie können das gleiche mit Semantic und anderen Komponenten tun.

Ich hoffe, dass jemand das nützlich fand.

    
GreGGus 10.02.2017, 16:42
quelle
0

Ich fand, dass die akzeptierte Antwort in meinem Fall nicht funktionierte, Redux-Form feuert weiterhin eine FOCUS -Aktion ab, die ein erneutes Rendern auslöst und mein Dropdown-Feld würde sich nicht öffnen. Möglicherweise mein schlechtes oder ein Update, aber hatte keine Zeit zu debuggen, kam also mit dieser Lösung.

Ich verwende Typescript und umgebe das Semantic UI Dropdown-Feld in einer benutzerdefinierten Komponente, die den Dropdown-Wert direkt aus dem Redux-Formular hinzufügt und abruft.

Funktioniert bis jetzt gut, sollte leicht zu Vanille-JS portiert werden.

ReduxFormSemanticDropdownComponent

Wenn Sie Typescript verwenden, ändern Sie AppState als Ihren eigenen Status-Objekttyp.

%Vor%

Verwenden

Fügen Sie das zu Ihrer normalen redux-Form hinzu, und es sollte sich wie ein Standardfeld verhalten.

%Vor%     
Chris 10.04.2018 10:37
quelle