Redux-Form: Not able to change value of input elements

Question

I've been trying to implement a form in MapsAddrForm.jsx using Redux-Form and I can't seem to change the value of my input element. When the page loads, the input element does not respond to keyboard input, and when the form field submits, it returns an empty object to the parent component DistrictFinder. Beyond these two files, I've also added form:formReducer as an argument to combineReducers much like the simple example in the Redux-Form tutorials. Is there any way to restore the ability for the DistrictFinder to receive data objects from the address form? For reference, I'm using React 15.1.0, React-redux 4.4.5, ES6, and Redux-Form 5.3.1, all compiled using Webpack.

MapsAddrForm.jsx

import React, {Component} from 'react';
import { connect } from 'react-redux';
import {reduxForm} from 'redux-form';

class MapsAddrForm extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {fields: {address,address2}, handleSubmit} = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <input type="text" placeholder="Your address" {...address}/>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'addressForm',                          
  fields: ['address']
})(MapsAddrForm);

DistrictFinder.jsx

import React, { Component, PropTypes } from 'react'
import MapsAddrForm from './MapsAddrForm.jsx'
import { connect } from 'react-redux'
import { changeAddress } from '../actions/index.jsx'

class DistrictFinder extends Component {
  constructor(props) {
    super(props);
    this.handleAddrSubmit = this.handleAddrSubmit.bind(this);
  }

  handleAddrSubmit(data) {
    console.log("Address received: " + JSON.stringify(data));
  }

  render() {
    const {address, district} = this.props
    return (
      <div class="GMaps">
        <h1>Find your district!</h1>
        <MapsAddrForm onSubmit={this.handleAddrSubmit} />
        <p>My district number is: {district}</p>
      </div>
    );
  }
}

DistrictFinder.propTypes = {
  district: PropTypes.string.isRequired,
  dispatch: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  const { district } = state.infoChange;

  return {
    district
  };
};

export default connect(mapStateToProps)(DistrictFinder);

Blaine Garrett · Accepted Answer · 2016-11-07 18:13:32Z

5

I ran into this as well on [email protected]

After looking at the source for one of the examples, I noticed the call to combineReducers has an explicit key "form" to the object argument. When I added this explicit key, the fields became editable.

// Correct
const reducer = combineReducers({
  form: reduxFormReducer // mounted under "form"
})

If you have an existing app, like I do, you likely have this style es6 syntax from the various redux starters.

// Incorrect: results in the witnessed bad behavior
const reducer = combineReducers({
  reduxFormReducer
})

See the combineReducers call at https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

It'd be interesting to see if this could be a constant that could be passed in and leveraged by the lib. "form" feels like a easily corruptible "namespace".

answered Nov 7, 2016 at 18:13

Blaine Garrett

1,3762 gold badges15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Redux-Form: Not able to change value of input elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related