Redux-Form: Không thể thay đổi giá trị của các yếu tố đầu vào

Question

Tôi đã cố triển khai biểu mẫu trong MapsAddrForm.jsx bằng Biểu mẫu Redux và dường như tôi không thay đổi được giá trị của yếu tố đầu vào của mình. Khi tải trang, phần tử đầu vào không đáp ứng với đầu vào bàn phím và khi trường biểu mẫu gửi, nó trả về một đối tượng trống cho thành phần cha DistrictFinder. Ngoài hai tệp này, tôi cũng đã thêm biểu mẫu: formReducer như là một đối số cho combinedReducers giống như ví dụ đơn giản trong hướng dẫn Biểu mẫu Redux. Có cách nào để khôi phục khả năng cho DistrictFinder để nhận các đối tượng dữ liệu từ biểu mẫu địa chỉ không? Để tham khảo, tôi đang sử dụng React 15.1.0, React-redux 4.4.5, ES6 và Redux-Form 5.3.1, tất cả được biên dịch bằng 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); 

Answer 1

Tôi chạy vào này là tốt trên redux-form@6.2.0

Sau khi xem xét các nguồn cho một trong các ví dụ, tôi nhận thấy cuộc gọi đến combineReducers có biểu mẫu "khóa rõ ràng" "đối số đối tượng. Khi tôi thêm khóa rõ ràng này, các trường có thể chỉnh sửa được.

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

Nếu bạn có một ứng dụng hiện có, như tôi làm, bạn có thể có cú pháp kiểu es6 này từ các trình khởi động redux khác nhau.

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

Xem combineReducers gọi tại https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

Nó muốn được thú vị để xem nếu điều này có thể là một hằng số mà có thể được thông qua vào và thừa hưởng bởi các lib. "hình thức" cảm thấy giống như một "không gian tên" dễ bị hỏng.