Question

我一直在尝试使用Redux-Form在MapsAddrForm.jsx中实现一个表单，但我似乎无法更改输入元素的值。当页面加载时，输入元素不响应键盘输入，当表单字段提交时，它返回一个空对象到父组件区域查找器。除了这两个文件之外，我还添加了form：formReducer作为combineReducers的参数，就像Redux-Form教程中的简单示例一样。有没有办法恢复区域查找器从地址表单接收数据对象的能力？作为参考，我使用了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的调用有一个明确的键＆＃34;形式＆＃34;到对象参数。当我添加此显式键时，字段变得可编辑。

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

如果你有一个现有的应用程序，就像我一样，你可能会从各种redux启动器中获得这种样式的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利用的常量，这很有趣。＆＃34;形式＆＃34;感觉像一个容易腐败的命名空间＆＃34;。

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

1 个答案: