[英]Initializing dynamically created redux-form field
我有一个动态创建的redux形式的字段。 例如,当我单击一个按钮时,我将执行以下操作:
renderFormFields() {
const r = someArray.map(s => {
console.log(s.Value);
return (<Field name={s.Name} type='number' component='input' min='1' {...s.Value} />);
})
{r}
}
render() {
renderFormFields()
}
现在console.log
正在为s.Value
打印正确的值,但是redux-form元素没有正确的值。 呈现输入字段时,该值为empty
。 知道在动态创建Redux形式的字段时如何初始化它吗? (我不能使用文档中提到的handleInitialize函数方法,因为表单字段是在运行时动态生成的)
您不应该传播s而不是s.value吗?
return (<Field name={s.Name} type='number' component='input' min='1' {...s} />);
因为您将s像这样's.Name'
字符串表示法's.Name'
您可以这样输入{s.Name}
Field
组件不包含value
属性。 您可以使用以下两个选项来设置默认值:
initialValues
(如果您知道将动态添加的字段的默认值) this.props.change
(如果默认值也是动态的) Redux-form的SimpleForm示例的修改版本:
import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm } from 'redux-form'
const extendedFields = [{ name: 'City', value: 'Hyderabad' }, { name: 'Phone', value: 2 }];
class SimpleForm extends React.Component {
constructor() {
super();
this.state = {
showExtended: false
};
}
addExtendedFields() {
// Not the best way to handle state. Doing this for simplicity
this.setState({ showExtended: { initialized: false } });
}
renderExtendedFields() {
const r = extendedFields.map(field => {
return (
<div key={field.name}>
<label>{field.name}</label>
<div>
<Field type='text' component='input' {...field} value={field.value} />
</div>
</div>
);
});
return r;
}
componentDidUpdate() {
const { showExtended } = this.state;
if (showExtended && !showExtended.initialized) {
extendedFields.map(field => {
this.props.change(field.name, field.value); // Option-2
return field;
});
this.setState({ showExtended: { initialized: true } });
}
}
render() {
const { handleSubmit, pristine, reset, submitting } = this.props;
const { showExtended } = this.state;
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component="input" type="text" placeholder="First Name" />
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component="input" type="text" placeholder="Last Name" />
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component="input" type="email" placeholder="Email" />
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component="input" type="radio" value="male" /> Male</label>
<label><Field name="sex" component="input" type="radio" value="female" /> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component="input" type="checkbox" />
</div>
</div>
{showExtended && this.renderExtendedFields()}
<div>
<label>Notes</label>
<div>
<Field name="notes" component="textarea" />
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
<button type="button" onClick={this.addExtendedFields.bind(this)} disabled={showExtended}>Show Extended fields</button>
</div>
</form>
);
}
}
let HOCSimpleForm = reduxForm({
form: 'simple'
})(SimpleForm);
HOCSimpleForm = connect(
state => ({
initialValues: { City: 'Test' } // Option-1
})
)(HOCSimpleForm)
export default HOCSimpleForm;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.