Redux-Form:无法更改输入元素的值

Question

我一直在尝试使用 Redux-Form 在 MapsAddrForm.jsx 中实现一个表单，但我似乎无法更改输入元素的值。页面加载时，input元素不响应键盘输入，当表单域提交时，返回一个空对象给父组件DistrictFinder。除了这两个文件之外，我还添加了 form:formReducer 作为 combineReducers 的参数，就像 Redux-Form 教程中的简单示例一样。有没有办法恢复 DistrictFinder 从地址表接收数据对象的能力？作为引用，我使用的是 React 15.1.0、React-redux 4.4.5、ES6 和 Redux-Form 5.3.1，全部使用 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

我在 redux-form@6.2.0 上也遇到了这个问题

在查看其中一个示例的源代码后，我注意到对 combineReducers 的调用。具有对象参数的显式键“形式”。当我添加这个显式键时，字段变得可编辑。

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

如果你有一个现有的应用程序，就像我一样，你可能会从各种 redux starter 中获得这种风格的 es6 语法。

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

请参阅在 https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L10 上的 combineReducers 调用

看看这是否可以是一个可以被 lib 传入和利用的常量会很有趣。 “形式”感觉就像一个容易损坏的“命名空间”。