2017-02-08 21 views
7

używam redux-formularz (niesamowite libs) obsługiwać moją postać & redux sklep w React aplikację. Wszystko działa dobrze, ważne formularze i zagnieżdżone wyjście json.Zintegruj React-semantyczne-UI i redux-formularz

Próbuję użyć reagować-semantyczna-ui składnik o Redux formularza. Przeszukałem w dokumentach, w jaki sposób zintegrować komponent niestandardowy z formą redux, a tutaj: http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/ Wydaje się być idealny.

Ale kiedy integruję Semantic i to, to na pewno działa.

To jest mój prosty test z kodem pseudo:

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

i tu moja CustomComponent użyciu rozwijanej. można znaleźć w dokumentacji rozwijanego & rekwizyty (onChange & wartości) tutaj:

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> 
) 

Jak w dokumentacji, że wartość & onChange rekwizyty na moim niestandardowy składnik dodany.

Ja wyraźnie tęsknię za czymś tutaj. Czy ktoś ma prosty przykład z formą redux i semantc ui?

Dzięki za pomoc.

Odpowiedz

21

Ok succed:

Aby korzystać React Semantic rozwijanej, jest to prosty przykład:

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> 
) 

I wszystko działa świetnie. Możesz zrobić to samo z Semantic i dowolnymi komponentami.

Mam nadzieję, że ktoś uznał to za przydatne.

+0

około roku później ... Czy to podejście zakończyło się dla Ciebie dobrze działa @GreGGus? Próbuję potwierdzić moje semantyczne formularze reagowania i trudno jest znaleźć bibliotekę, aby to zrobić. – izikandrw

+1

Tak, wszystko działa. Nie pracuję już nad React/Redux, ale to działało dobrze. Nie zapomnij poradzić sobie z props.input.value, która jest wartością na Redux i ReduxForm. – GreGGus

Powiązane problemy