Redux-Form：無法更改輸入元素的值

我一直在嘗試使用Redux-Form在MapsAddrForm.jsx中實現一個表單，而且我似乎無法更改我的輸入元素的值。當頁面加載時，輸入元素不響應鍵盤輸入，並且當表單字段提交時，它將一個空對象返回給父組件區域查找器。除了這兩個文件之外，我還添加了form：formReducer作爲組合縮減器的參數，就像Redux-Form教程中的簡單示例一樣。有沒有辦法恢復DistrictFinder從地址表單接收數據對象的能力？作爲參考，我使用React 15.1.0，React-redux 4.4.5，ES6和Redux-Form 5.3.1，全部使用Webpack編譯。Redux-Form：無法更改輸入元素的值

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

來源

2016-07-15 Tim Klem

我遇到了這個問題，以及對[email protected]

看後來源爲其中一個例子，我注意到combineReducers的調用有一個明確的鍵「form 「到對象的論點。當我添加這個明確的鍵時，這些字段變得可編輯。

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

如果你有一個現有的應用程序，像我這樣做，你可能已經從各種終極版首發這種風格ES6語法。

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

見combineReducers致電https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10

這將會是有趣的，看看這可能是能夠在傳遞和的lib利用恆定。「形式」感覺像是一個容易腐敗的「命名空間」。

來源

2016-11-07 18:13:32

Redux-Form：無法更改輸入元素的值

回答

相關問題