2016-07-15 101 views
5

Ho cercato di implementare un modulo in MapsAddrForm.jsx utilizzando Redux-Form e non riesco a modificare il valore del mio elemento di input. Quando la pagina viene caricata, l'elemento di input non risponde all'input della tastiera e quando il campo modulo viene inviato, restituisce un oggetto vuoto al componente principale DistrictFinder. Oltre a questi due file, ho anche aggiunto form: formReducer come argomento per combinare iReducers in modo molto simile al semplice esempio nelle esercitazioni di Redux-Form. Esiste un modo per ripristinare la capacità di DistrictFinder di ricevere oggetti dati dal modulo dell'indirizzo? Per riferimento, sto usando React 15.1.0, React-redux 4.4.5, ES6 e Redux-Form 5.3.1, tutti compilati usando Webpack.Redux-Form: impossibile modificare il valore degli elementi di input

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

risposta

4

mi sono imbattuto in questo pure su [email protected]

Dopo aver guardato il fonte per uno degli esempi, ho notato che la chiamata a combineReducers ha una forma di chiave esplicita "all'argomento oggetto. Quando ho aggiunto questa chiave esplicita, i campi sono diventati modificabili.

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

Se si dispone di un'applicazione esistente, come faccio io, è probabilmente questa sintassi ES6 stile dai vari antipasti Redux.

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

Vedi le combineReducers fanno scalo a https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

Sarebbe interessante vedere se questo potrebbe essere una costante che potrebbe essere passato e sfruttato dal lib. "forma" si sente come uno "spazio dei nomi" facilmente corruttibile.

Problemi correlati