Wie verwende ich Semantic-Ui-Reaction mit Redux-Form?

Question

Jetzt verwende ich ReduxForm Feld Komponente und wenden Sie rohe Semantic UI Klassen. Aber ich stieß dann auf Semantic UI React, was die Dinge viel einfacher macht - Sie können einfach React-Komponenten verwenden, die den semantischen UI-Stil haben.

Wie würden Sie ReduxForm mit SemanticUIReact integrieren?

Zum Beispiel, ich habe zur Zeit so etwas wie:

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

Aber dann würde Ich mag Semantic UI-Komponenten wie die unten zu redux-Form Reagieren verbinden:

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

! Hinweis Feld ist von redux-Form und Form.Field ist aus semantisch-ui-reagieren

Answer 1

eine Komponente wie folgt erstellen:

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 
} 

Dann in Ihrer Komponente rufen Sie Ihre Feld wie folgt aus:

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)