使用Bulma CSS获得一些帮助我制作了自定义组件,使我能够使用redux-form处理不同类型的输入。
我想为选择输入设置默认值。
i
我在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;
中有正确的值,但默认情况下下拉列表不会选择此值。
答案 0 :(得分:2)
value
的{{1}}由redux-form商店中的值控制。初始化时,应在配置中为redux-form表单设置<Field />
:
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
传递到表单组件。
答案 1 :(得分:2)
根据this thread on Github {/ 1}} defaultValue
已禁用redux-form
相反,您可以使用initialValues
redux-form
API
您可以详细了解initialValues
on Redux Form Docs或initializefromstate