设置 select 默认值不起作用

Question

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

我想为 select 输入设置默认值。

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 中有正确的值，但默认情况下下拉列表没有 select 这个值。

Answer 1

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

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 作为 prop 传递给表单组件。

source

Answer 2

根据 this thread on Github

，defaultValue 似乎已在 redux-form 中禁用

相反，您可以使用 redux-form

的 initialValues API

您可以阅读更多关于 initialValues on Redux Form Docs or initializefromstate

设置 select 默认值不起作用

Set select default value doesn't work

reactjs

redux

redux-form