Как использовать семантико-ui-реакцию с редукцией?

Question

Сейчас я использую RedoxForm Поле Компонент и применить raw Семантические классы пользовательского интерфейса. Но затем я наткнулся на Semantic UI React, что значительно упрощает работу - вы можете просто использовать компоненты React, имеющие семантический стиль ui.

Как вы могли бы интегрировать ReduxForm с SemanticUIReact?

Например, я в настоящее время есть что-то вроде:

<Field name="gender" component="select" className="ui fluid dropdown"> 
    {genderOptions} 
</Field> 

Но тогда, я хотел бы соединить Семантический интерфейс Реагировать компоненты, как один ниже для Redux-формы:

<Form.Field control={Select} label='Gender' options={genderOptions} placeholder='Gender' /> 

! Примечание поле от Redux-формы и Form.Field от семантического-интерфейса реагирует

Answer 1

Создать компонент, как это:

import React, { PropTypes } from 'react' 
import { Input } from 'semantic-ui-react' 

export default function SemanticReduxFormField ({ input, label, meta: { touched, error, warning }, as: As = Input, ...props }) { 
    function handleChange (e, { value }) { 
    return input.onChange(value) 
    } 
    return (
    <div> 
     <As {...input} value={input.value} {...props} onChange={handleChange} error={touched && error} /> 
     {touched && (warning && <span>{warning}</span>)} 
    </div> 
) 
} 

SemanticReduxFormField.propTypes = { 
    as: PropTypes.any, 
    input: PropTypes.any, 
    label: PropTypes.any, 
    meta: PropTypes.any 
} 

Затем в вашем компоненте называет ваше поле, как это:

import { Form } from 'semantic-ui-react' 
import { reduxForm, Field } from 'redux-form' 

class MyComponent extends Component { 
    render() { 
    return (
     <Form> 
     <Field component={SemanticUiField} as={Form.Select} name='firstname' multiple options={options} placeholder='Select...' /> 
     </Form> 
    ) 
    } 
} 

export default reduxForm({...})(MyComponent)