Redux Form:来自当前状态的InitialState

时间:2017-10-31 09:33:26

标签: reactjs redux redux-form

我尝试使用redux格式构建表单应用程序。

目前它工作得很好,但我想添加默认值以显示在我的输入中,并且无法弄清楚如何操作。

如果用户输入修改后期视图,则应显示默认值。 (就像在StackOverflow上一样,当您按下编辑时,您可以看到帖子的上一个值。)

目前,我将它构建在两个不同的文件中,一个呈现屏幕PostEdit和一个FormComponent:FormRenderForm

PostEdit

<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))
)

FormRenderForm

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

0 个答案:

没有答案