如何让 react-bootstrap select 与 redux 表单一起使用？答案

【问题标题】：how to get react-bootstrap select to work with redux forms?如何让 react-bootstrap select 与 redux 表单一起使用？
【发布时间】：2017-11-05 17:46:38
【问题描述】：

我正在使用 redux 表单构建一个表单，并且我正在使用 react-bootstrap for ui 框架。但我无法让 redux 表单与 react-bootstrap 选择组件一起使用。显示选择字段，但不呈现选项并且它们不可见。任何帮助将不胜感激。

这是我目前所拥有的：

form.js：

render() {
<Form horizontal onSubmit={handleSubmit}>
  <Field component={SelectField} label='Gender' name='gender'>
            <option value='male'>Male</option>
            <option value='female'>Female</option>
    </Field>
</Form>
}

selectField.js：

props => {
   return (
    <FormGroup>
        <Col componentClass={ControlLabel} sm={2}>
            {props.label}
        </Col>
        <Col sm={4}>
            <FormControl componentClass='select' placeholder='select' 
                {...props.input}>
            </FormControl>
        </Col>
    </FormGroup>
  );
 }

【问题讨论】：

标签： reactjs react-redux redux-form react-bootstrap

【解决方案1】：

这就是我能够选择使用字段和 react-bootsrap 的方式。使用此代码，您可以将任何值数组作为道具传递给 Field 控件，它将被传递给 renderSelect 并为每个值创建一个选项。

在您的组件文件中（或从网络服务或其他地方收集）：

const colors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']; //i.e. options

在你的组件内部：

  <form onSubmit={handleSubmit}>
        <Form.Group controlId="fromColors">
          <Form.Label>Colors</Form.Label>
          <Field
            type="select"
            placeholder="Select Colors"
            label="colors"
            name="colors"
            options={colors}
            component={renderSelect}
          />
        </Form.Group>
</form>

然后在可以导入组件的 renderField.js 文件中，您可以执行以下操作：

const renderSelect = ({
  input,
  options,
  label,
  type,
  meta: { touched, error }
}) => (
  <div>
    <FormControl {...input} as="select">
      <option value="">Select a color...</option>
      {options.map(val => (
        <option value={val} key={val}>
          {val}
        </option>
      ))}
    </FormControl>
    {touched && error && <span>{error}</span>}
  </div>
);
export {renderSelect };

【讨论】：