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