Redux-Form: Nicht in der Lage, den Wert der Eingabeelemente zu ändern

Question

Ich habe versucht, ein Formular in MapsAddrForm.jsx mit Redux-Form zu implementieren und ich kann nicht scheinen, den Wert meines Eingabeelements zu ändern. Wenn die Seite geladen wird, reagiert das Eingabeelement nicht auf die Tastatureingabe. Wenn das Formularfeld übergeben wird, wird ein leeres Objekt an die übergeordnete Komponente "DistrictFinder" zurückgegeben. Neben diesen beiden Dateien habe ich auch das Formular: formReducer als Argument für combinedReducers hinzugefügt, ähnlich dem einfachen Beispiel in den Redux-Form-Tutorials. Gibt es eine Möglichkeit, die Fähigkeit des DistrictFinders wiederherzustellen, Datenobjekte aus dem Adressformular zu empfangen? Als Referenz verwende ich React 15.1.0, React-redux 4.4.5, ES6 und Redux-Form 5.3.1, die alle mit Webpack kompiliert wurden.

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

Answer 1

ich in diese lief auch auf redux-form@6.2.0

Nachdem bei der Suche Quelle für eines der Beispiele, bemerkte ich den Aufruf an combineReducers hat einen expliziten Schlüssel "Form "zum Objektargument. Als ich diesen expliziten Schlüssel hinzugefügt habe, wurden die Felder editierbar.

Wenn Sie eine vorhandene App haben, wie ich, haben Sie wahrscheinlich diese Stil es6 Syntax aus den verschiedenen Redux Starter.

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

anzeigen combineReducers ruft bei https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

Es wäre interessant zu sehen, ob dies eine Konstante sein könnte, die von der lib in und genutzt weitergegeben werden konnte. "form" fühlt sich an wie ein leicht korrumpierbarer "namespace".