设置选择默认值不起作用

Question

使用 Bulma CSS 获得一点帮助，我制作了自定义组件，使我能够使用 redux-form 处理不同类型的输入。

我想为选择输入设置默认值。

import React from 'react';
import { Field } from 'redux-form';

const DropDownItem = ({ spec }) => {
  const { name, defaultValue, items, iconLeft } = spec;

  return (
    <div className="field">
      <div className="control has-icons-left">
        <div className="select is-fullwidth">
          <Field name={name} value={defaultValue} component="select">
            {/* loop for countries */}
            {items.map((country, i) => (
              <option value={country} key={i}>
                {country}
              </option>
            ))}
          </Field>
        </div>
        <div className="icon is-left">
          <i className={iconLeft} />
        </div>
      </div>
    </div>
  );
};

export default DropDownItem;

我有正确的值，defaultValue但下拉菜单默认不选择该值。

Answer 1

avalue的<Field />是由 redux-form 存储中的值控制的。initialValues初始化时，您应该在配置中为 redux-form 表单设置：

import React from 'react'
import { Field, reduxForm } from 'redux-form'

let MyFormComponent = props => {
    const { handleSubmit } = props;
    return (
        <form onSubmit={handleSubmit}>
            <Field name="fieldName" component="input" /> // this field's default value will be 'defaultValue', as set in initialValues
            ...
        </form>
    )
}

MyFormComponent = reduxForm({
    form: 'myForm',
    initialValues: {
        'fieldName': 'defaultValue',
        ...
    }
})(MyFormComponent)

export default MyFormComponent;

您还可以将initialValues其作为 a传递prop给表单组件。

来源