我尝试使用redux格式构建表单应用程序。
目前它工作得很好,但我想添加默认值以显示在我的输入中,并且无法弄清楚如何操作。
如果用户输入修改后期视图,则应显示默认值。 (就像在StackOverflow上一样,当您按下编辑时,您可以看到帖子的上一个值。)
目前,我将它构建在两个不同的文件中,一个呈现屏幕PostEdit
和一个FormComponent:FormRenderForm
<Field
label="Title"
name="title"
type="input"
textType="text"
currentValue={posts.title}
component={FormRenderForm}
/>
正如您在此处所看到的,只是一个连接到自定义组件的常规<Field>
组件,我希望我的currentValue
成为默认值。
如果我对我的reduxForm进行了修改,我可以获得一些值,但现在只是字符串,不知道如何从状态中获取它。
const mapStateToProps = ({ posts }, ownProps) => {
console.log(posts)
return {
posts: posts.filter(
item => item.id === ownProps.match.params.postId && item.deleted !== true
)[0],
/* This initialValues seams to not be working */
initialValues: {
title: posts[0] !== undefined ? posts[0].title : '',
body: posts[0] !== undefined ? posts[0].body : '',
},
}
}
来自mapStateToProps的Console.log
[
0: {
author: "thingtwo"
body: "Everyone says so after all."
category: "react"
commentCount: 0
deleted: false
id: "8xf0y6ziyjabvozdd253nd"
timestamp: 1467166872634
title: "Stackoverflow is the best place to learn React"
voteScore:6
}
]
将InitialValues添加到reduxForm
export default withRouter(
reduxForm({
form: 'EditPost',
validate,
/*
This makes it pop up as myTitle and myBody but cant grab state
here.
initialValues: { title: 'myTitle', body: 'myBody' },
*/
})(connect(mapStateToProps, { getPosts, editPost })(PostEdit))
)
import React from 'react'
import PropTypes from 'prop-types'
const FormRenderForm = props => {
return (
<div className="field">
<div className="control">
<label className="label">{props.label}</label>
<props.type
className={props.type}
type={props.textType}
/* defaultValue={props.currentValue } */
{...props.input}
/>
{props.meta.touched &&
props.meta.error && (
<p className="error">
<i className="fa fa-exclamation-circle" aria-hidden="true" />
{props.meta.error}
</p>
)}
</div>
</div>
)
}
FormRenderForm.propTypes = {
label: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
textType: PropTypes.string.isRequired,
input: PropTypes.object.isRequired,
meta: PropTypes.object.isRequired,
}
export default FormRenderForm
最诚挚的问候,Petter