简体   繁体   中英

Update field value from predefined value redux-form

How to update redux form Field component value that was predefined from my redux store ? I see my values in the fields but I can't type to update them. I need to trigger onChange event but I don't know how. Maybe is some way to set initialValue ? My package file:

"redux": "3.7.2",
"redux-form": "^7.1.2",
"react": "16.0.0",

PS. I wanted to use defaultValue but since redux-form 5.0.0 it was deleted.

Code:

import React,{Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import {connect} from 'react-redux';
import {fetchCeoData} from '../../actions/CMS';

class CEOForm extends Component{
  constructor(props) {
    super(props);
    this.renderTextarea = this.renderTextarea.bind(this);
  }

  componentDidMount(){
    this.props.fetchCeoData();
  }

  submit(values){
    console.log(values);
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  renderTextarea({_id, title, description, content, input}){
    return(
      <div key={_id} className="cms-form-row">
        <label htmlFor={title}>{description}</label>
        <textarea {...input} value={content} rows="6" cols="50"></textarea>
      </div>
    )
  }
  render(){
    return(
      <section id="ceo-form">
        <h1 className="cms-section-header">Narzędzia CEO</h1>
        <div className="ceo-form-wrapper">
          <form onSubmit={this.props.handleSubmit(this.submit)}>
            {this.props.ceoData.map((item) => {
              return <Field
                name={item.title}
                key={item._id}
                title={item.title}
                content={item.content}
                description={item.description}
                component={this.renderTextarea}
              />
            })}
            <button type="submit">Wyślij !</button>
          </form>
        </div>
      </section>
    )
  }
}

function mapStateToProps(state){
  return{
    ceoData: state.ceoData
  }
}

function loadData(store) {
  return store.dispatch(fetchCeoData());
}

CEOForm = connect(mapStateToProps, {fetchCeoData})(reduxForm({form: 'ceo', enableReinitialize : true})(CEOForm));

export default{
  loadData,
  component: CEOForm
}

Ok. Here is what I end up with. I was reading post sugested in the comments: How to programatically set Redux-Form Field value But this solution Is kinda weird because you are manipulating by if statements. I've came up with something like this: In mapStateToProps I used object property described in redux form as initialValue example:

Function mapStateToProps(state){
var data = _.pick(state.myprops, "name" );
return{
    myprops: state.myprops,
    initialValue: {
        'nameOfMyField': data.name.fieldname
    } 
} 
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM