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)

如何使用redux-form进行语义-ui-react？

1 个答案: