如何将语义 ui-react 与 redux-form 一起使用？

【问题标题】：How to use semantic-ui-react with redux-form?如何将语义 ui-react 与 redux-form 一起使用？
【发布时间】：2017-06-21 07:46:59
【问题描述】：

现在我使用 ReduxForm 的 Field 组件并应用原始 语义 UI 类。但后来我遇到了 Semantic UI React，这让事情变得容易多了——你可以使用具有语义 ui 风格的 React 组件。

您将如何将 ReduxForm 与 SemanticUIReact 集成？

例如，我目前有类似的东西：

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

但是，我想将如下所示的 Semantic UI React 组件连接到 redux-form：

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

！注意 Field 来自 redux-form 而 Form.Field 来自 semantic-ui-react

【问题讨论】：

标签： semantic-ui redux-form semantic-ui-react

【解决方案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)

【讨论】：