Comment utiliser sémantique-ui-réagir avec redux-forme?

Question

Pour le moment, j'utilise le composant Champ de ReduxForm et j'applique les classes d'interface utilisateur sémantique . Mais je suis alors tombé sur Semantic UI React, ce qui rend les choses beaucoup plus faciles - vous pouvez simplement utiliser les composants React qui ont le style ui sémantique.

Comment allez-vous intégrer ReduxForm avec SemanticUIReact?

Par exemple, j'ai actuellement quelque chose comme:

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

Mais, je voudrais relier l'interface sémantique React composants comme celui ci-dessous à la forme redux:

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

! Remarque Champ est de Redux forme et Form.Field est de sémantique-ui-REACT

Answer 1

Créer un composant comme celui-ci:

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 
} 

Ensuite, dans votre composant appelez votre champ comme ceci:

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)