以redux形式使用react-bootstrap

Question

我正在尝试以redux形式集成react-bootstrap Dropdown组件。这是我的代码

    import React from 'react'
    import {Input,Form,FormGroup,FormControl,ControlLabel,Button,ButtonToolbar,Panel,Checkbox,Radio} from 'react-bootstrap'

        import { reduxForm,Field,reset } from 'redux-form'

        const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
            return (
                <FormControl
                    type={type} onChange={input.onChange} />
            )
        }
        class dropDown extends React.Component {
            render() {
                return (<FormControl componentClass="select" {...this.props} {...this.input} />)
            }
        }

        let Gri = props => {
          const { handleSubmit,pristine,submitting} = props
          return (
            <form onSubmit={handleSubmit}>
            <div>
              <FormGroup controlId="formInlineName">
                <ControlLabel>User Name:</ControlLabel>
                <Field name="firstname" component={FieldInput}  type="text"/>
              </FormGroup>
            </div>
            <div>
              <FormGroup controlId="formControlsSelect">
              <ControlLabel>Category:</ControlLabel>
                <Field name="category_id" component={dropDown}>
                      <option value="1">Health</option>
                      <option value="2">Municipality Roads</option>
                      <option value="3">Women and Child Development</option>
                    </Field>
                </FormGroup>
            </div>
            <Button bsStyle="success" type="submit" disabled={submitting}>SUBMIT</Button>
          </form>
        )
        }
const onSubmit = values => {
  console.log(values)
}
Gri= reduxForm({
  form: 'gri',
  onSubmit,
})(Gri)

export default Gri

在输出中，显示了下拉列表，但单击“提交”时未返回该值。请帮助我找到解决方法