如何使用與redux-form的語義 - 用戶反應？

Question

現在我使用ReduxForm的字段組件和應用原始語義UI類。但我遇到了語義UI反應，這使事情變得更容易 - 您可以使用具有語義UI風格的React組件。

您會如何將ReduxForm與SemanticUIReact集成？

例如，我現在有這樣的：

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

但後來，我想連接語義UI反應的組分，如一個下面Redux的形式：

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

！注意：場是終極版型和Form.Field是從語義的UI反應的

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)