无法在 redux-form w 中设置默认值.反应 [英] unable set a default value in redux-form w. react

问题描述

我无法为带有 redux-form 的表单设置默认值.我正在寻找的结果是一个可编辑的文本字段，以便稍后提交到数据库.即更新电子邮件地址.

我尝试将表单中的属性设置为 value 或 defaultValue.注意:我已经删除了重复的代码，以便仅使用名称"字段就可以更轻松地阅读.

感谢任何见解！

 import React, { Component, PropTypes } from 'react';从'redux-form'导入{ reduxForm };导出常量字段 = ['name']//(容器)页面-profile.jsimport React, { Component } from 'react';从'react-redux'导入{连接}；从'../components/Profile'导入配置文件；类 PageProfile 扩展组件 {使成为() {返回 (<简介用户信息 = {this.props.userInfo}/>)}}//在渲染前需要这个页面——中断页面PageProfile.propTypes = {//userInfo: PropTypes.object.isRequired}函数 mapStateToProps(state) {返回 {用户信息:state.auth.userInfo}}//给孩子注入导出默认连接(mapStateToProps，{})(页面配置文件);//配置文件.js导出默认类配置文件扩展组件{使成为() {const { 字段:{名称}、resetForm、handleSubmit、提交} = this.props返回 (<div><img className="image" src={this.props.userInfo.img_url}/><form onSubmit={handleSubmit}><div><div><标签>名称</标签><div><input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/>

{name.touched &&name.error &&<div>{name.error}</div>}

<button type="submit" disabled={submitting}>{提交?<i/>: <i/>} 提交</表单>

)}}Profile.propTypes = {字段:PropTypes.object.isRequired，处理提交:PropTypes.func.isRequired，resetForm: PropTypes.func.isRequired,提交:PropTypes.bool.isRequired}导出默认 reduxForm({表格:'个人资料'，领域，证实})(轮廓)

解决方案

你可以在 reduxForm 的 mapStateToProps 中提供 initialValues :

const mapFormToProps = {表格:'个人资料'，领域，证实};const mapStateToProps = (state, ownProps) =>({初始值:{名称: ownProps.userInfo.name}});reduxForm(mapFormToProps，映射状态到道具)(轮廓)

然后像这样绑定:<input type="text" placeholder="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} />.

这篇关于无法在 redux-form w 中设置默认值.反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！