无法以重复形式w设置默认值。应对 [英] unable set a default value in redux-form w. react

问题描述

我无法设置w / redux-form表单的默认值。我正在寻找的结果是稍后提交到数据库的可编辑文本字段。即更新电子邮件地址。

我尝试将表单中的属性设置为 value 或 defaultValue 。
注意：我已经重复使用了代码，以便仅通过名称字段便于阅读。

任何见解都会被赞赏！

  import React，{Component，来自'react'的PropTypes; 
从'redux-form'导入{reduxForm}; 
 export const fields = ['name'] 
 
 //（容器）page-profile.js 
 
从'react'导入React，{Component}; 
从'react-redux'导入{connect}; 
从'../components/Profile'导入配置文件; 
 
 class PageProfile扩展组件{
 
 render（）{
 return（
< Profile 
 userInfo = {this.props.userInfo } 
 /> 
）
} 
} 
 //在呈现前需要此页面 - 打破页面
 PageProfile.propTypes = {
 // userInfo：PropTypes.object.isRequired 
} 
 
函数mapStateToProps（state）{
 return {
 userInfo：state.auth.userInfo 
 } 
 
 
 $ b //注入到子
导出默认连接（mapStateToProps，{
}）（PageProfile）; 
 
 
 
 
 
 // profile.js 
 
导出默认类Profile扩展组件{
 render（ ）{
 const {fields：{name}，resetForm，handleSubmit，submitting} = this.props 
 return（
< div> 
< img className =image src = {this.props.userInfo.img_url} /> 
 
< form onSubmit = {handleSubmit}> 
< div> 
< div> 
< label> name< / label> 
< div> 
< input type =textdefaultValue = {this.props.userInfo.name} placeholder =name{.. .name} /> 
< / div> 
 {name.touched&&& name.error&&< div> {name.error}< / div> b $ b< / div> 
< butto n type =submitdisabled = {submitting}> 
 {submitting？ < I /> ：< i />}提交
< / button> 
< / form> 
< / div> 
）
} 
} 
 Profile.propTypes = {
 fields：PropTypes.object.isRequired，
 handleSubmit：PropTypes.func.isRequired，
 resetForm：PropTypes.func.isRequired，
 submitting：PropTypes.bool.isRequired 
} 
 
导出默认的reduxForm（{
表单：'Profile'，
字段，
验证
））（Profile）
  

解决您可以在 reduxForm 的mapStateToProps中提供 initialValues ：

  const mapFormToProps = {
 form：'Profile'，
 fields，
 validate 
}; 
 
 const mapStateToProps =（state，ownProps）=> （{
 initialValues：{
 name：ownProps.userInfo.name 
} 
}）; 
 
 reduxForm（
 mapFormToProps，
 mapStateToProps 
）（Profile）
  

然后就像这样绑定：< input type =textplaceholder =name{... name} /> 。

I'm unable to set a default value of a form w/redux-form. The result I'm looking for is an editable text field to later to submit to the database. i.e. updating an email address.

I've tried setting a property in the form to value or defaultValue. Note: I've taken repetitive code out to make this easier to read with just a "name" field.

any insight is appreciated!

  import React, { Component, PropTypes } from 'react';
    import { reduxForm } from 'redux-form';
    export const fields = [ 'name']

        //(container) page-profile.js

            import React, { Component } from 'react';
            import { connect } from 'react-redux'; 
            import Profile from '../components/Profile';

            class PageProfile extends Component {

              render() {
                return (
                 <Profile 
                    userInfo = {this.props.userInfo}
                 />
                )
              }
            }
            // requiring this page before rendering -- breaks page
            PageProfile.propTypes = {
               //userInfo: PropTypes.object.isRequired
            }

            function mapStateToProps(state) {
              return {
               userInfo : state.auth.userInfo
              }
            }


            // injection to child
            export default connect(mapStateToProps, {
            })(PageProfile);





           // profile.js

        export default class Profile extends Component {
              render() {
                const { fields: {name }, resetForm, handleSubmit, submitting } = this.props
                return (
                    <div>
                    <img className="image" src={this.props.userInfo.img_url}/>

                    <form onSubmit={handleSubmit}>
                    <div>
                    <div>
                      <label>name</label>
                      <div>
                      <input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/>
                      </div>
                      {name.touched && name.error && <div>{name.error}</div>}
                    </div>
                      <button type="submit" disabled={submitting}>
                        {submitting ? <i/> : <i/>} Submit
                      </button>
                  </form>
                  </div>
                )
              }
            }
            Profile.propTypes = {
              fields: PropTypes.object.isRequired,
              handleSubmit: PropTypes.func.isRequired,
              resetForm: PropTypes.func.isRequired,
              submitting: PropTypes.bool.isRequired
            }

            export default reduxForm({
              form: 'Profile',
              fields,
              validate
            })(Profile)

解决方案

You can supply initialValues in reduxForm's mapStateToProps:

const mapFormToProps = {
  form: 'Profile',
  fields,
  validate
};

const mapStateToProps = (state, ownProps) => ({
  initialValues: {
    name: ownProps.userInfo.name
  }
});

reduxForm(
  mapFormToProps,
  mapStateToProps
)(Profile)

Then just bind like so: <input type="text" placeholder="name" {...name} />.

这篇关于无法以重复形式w设置默认值。应对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！