2017-02-08 12 views
7

Ich verwende redux-Form (genial Libs) zu meiner Form & redux store Griff in App React. Alles funktioniert gut, wichtige Formulare und verschachtelte json-Ausgabe.Integrieren React-Semantic-UI und Redux-Form

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: http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/ scheint perfekt.

Aber wenn ich Semantic und dies integrieren, funktioniert es.

Das ist mein einfacher Test mit Pseudo-Code:

const TestComponent = props => (
<Form> 
    <Field name="dropdownTest" component={ TestSelect } /> 
</Form> 
) 

und hier meine Custom Dropdown verwenden.

http://react.semantic-ui.com/modules/dropdown

import Form , Dropdown from 'semantic-ui-react' 
import {myOption from './myOption' 

const TestSelect = field = (
    <Form.Field> 
      <label> Test dropdown </label> 
      <Dropdown option={myOption} selection 
            value={{val : field.input.value}} 
            onChange={ param => field.input.onChange(param.val)} /> 
    </Form.Field> 
) 

Wie in der Dokumentation, ich Mehrwert & onChange Requisiten auf meiner individuellen Komponente: Sie können die Drop-Down-Dokumentation & Requisiten (onChange & Wert) hier.

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

Danke für Ihre Hilfe.

Antwort

21

Ok ich succed:

zu verwenden, um Semantic Dropdown Reaktion, ist dies ein einfaches Beispiel:

const TestComponent = props => (
<Form> 
    <Field name="dropdownName" component={ DropdownFormField} 
      label="Dropdown Test" 
     /> 

</Form> 
) 



const DropdownFormField = props => (
<Form.Field> 
    <Dropdown selection {...props.input} 
      value={props.input.value} 
      onChange={(param,data) => props.input.onChange(data.value)} 
      placeholder={props.label} 
    /> 
    </Form.Field> 
) 

Und alles funktioniert super. Sie können das gleiche mit Semantic und beliebigen Komponenten tun.

Ich hoffe, dass jemand das nützlich fand.

+0

etwa ein Jahr später ... hat dieser Ansatz am Ende funktioniert für Sie gut @GreGGus? Ich versuche, meine semantischen ui reagieren Formen zu validieren und habe es schwer, eine Bibliothek zu finden, um es zu tun – izikandrw

+1

Ja alles funktioniert. Ich arbeite nicht mehr an React/Redux, aber das funktionierte gut. Vergessen Sie nicht, props.input.value zu behandeln, was der Wert von Redux & ReduxForm ist. – GreGGus