Redux-Form: Giriş elemanlarının değerini değiştiremiyor

Question

Redux-Form'u kullanarak MapsAddrForm.jsx'te bir form uygulamaya çalışıyorum ve giriş elemanımın değerini değiştiremiyorum. Sayfa yüklendiğinde, giriş öğesi klavye girişine yanıt vermiyor ve form alanı gönderildiğinde, üst bölge DistrictFinder'e boş bir nesne döndürüyor. Bu iki dosyanın ötesinde, şunu da ekledim: formReducer, Redux-Form öğreticilerindeki basit örnek gibi birleştirme için bir argüman olarak. DistrictFinder'in adres formundan veri nesneleri alma yeteneğini geri yüklemek için herhangi bir yolu var mı? Referans olarak, Webpack kullanılarak derlenmiş olan React 15.1.0, React-redux 4.4.5, ES6 ve Redux-Form 5.3.1 kullanıyorum.

Ben baktıktan sonra hem

redux-form@6.2.0

bu koştu

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

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 örneklerden biri için kaynak, ben combineReducers aramanın açık bir anahtar "formu olduğunu fark ettim "nesne argümanına. Bu açık anahtarı eklediğimde alanlar düzenlenebilir oldu. Varolan bir uygulamanız varsa benim gibi

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

, büyük olasılıkla çeşitli redux başlayanlar bu tarz ES6 sözdizimine sahiptir.

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

geçirilir ve lib tarafından kaldıraçlı olabilir sabit olup olamayacağını görmek ilginç olurdu combineReducers https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

de diyoruz bakın. "form" kolayca değiştirilebilen "ad alanı" gibi hissediyor.