admin管理员组文章数量:1332628
I want to pass initial values (ing from the props of a react-redux ponent) to my redux-form. But, I get not value when I inspect the data passed to the renderField
. I followed the posts here in SO and on redux-form git forum, and I'm using initialValues
in mapStateToProps
but still it doesn't work.
This is my react-redux ponent which holds the redux-form:
class ShowGroup extends Component {
render() {
if (this.state.loading) {
return <div>Loading group ....</div>;
}
if (this.state.error) {
return <div>{this.state.error}</div>;
}
let group = this.props.groups[this.groupId];
return (
<div className="show-group">
<form>
<Field
name="name"
fieldType="input"
type="text"
ponent={renderField}
label="Name"
validate={validateName}
/>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
groups: state.groups,
initialValues: {
name: 'hello'
}
};
}
const mapDispatchToProps = (dispatch) => {
return {
//.....
};
};
export default reduxForm({
form:'ShowGroup'
})(
connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
This is my renderField code:
export const renderField = function({ input, fieldType, label, type, meta: { touched, error }}) {
let FieldType = fieldType;
return (
<div>
<label>{label}</label>
<div>
<FieldType {...input} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
}
I want to pass initial values (ing from the props of a react-redux ponent) to my redux-form. But, I get not value when I inspect the data passed to the renderField
. I followed the posts here in SO and on redux-form git forum, and I'm using initialValues
in mapStateToProps
but still it doesn't work.
This is my react-redux ponent which holds the redux-form:
class ShowGroup extends Component {
render() {
if (this.state.loading) {
return <div>Loading group ....</div>;
}
if (this.state.error) {
return <div>{this.state.error}</div>;
}
let group = this.props.groups[this.groupId];
return (
<div className="show-group">
<form>
<Field
name="name"
fieldType="input"
type="text"
ponent={renderField}
label="Name"
validate={validateName}
/>
</form>
</div>
);
}
}
function mapStateToProps(state) {
return {
groups: state.groups,
initialValues: {
name: 'hello'
}
};
}
const mapDispatchToProps = (dispatch) => {
return {
//.....
};
};
export default reduxForm({
form:'ShowGroup'
})(
connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
This is my renderField code:
export const renderField = function({ input, fieldType, label, type, meta: { touched, error }}) {
let FieldType = fieldType;
return (
<div>
<label>{label}</label>
<div>
<FieldType {...input} type={type} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
}
Share
Improve this question
edited Feb 18, 2018 at 18:40
Arian
asked Feb 18, 2018 at 15:39
ArianArian
7,74924 gold badges107 silver badges190 bronze badges
1 Answer
Reset to default 9You are exporting the wrapped ponent with incorrect order
export default reduxForm({
form:'ShowGroup'
})(
connect(mapStateToProps, mapDispatchToProps)(ShowGroup)
);
should be
export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({
form:'ShowGroup'
})(ShowGroup);
The reason being that the redux form HOC needs the initialValues
prop for itself, if you reverse the order, reduxForm
doesn't get the props rather they are passed directly to the ponent, which doesn't know what to do with it.
本文标签: javascriptPass initial value to reduxformStack Overflow
版权声明:本文标题:javascript - Pass initial value to redux-form - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742271481a2444386.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论