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

Question

现在我使用 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

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)