redux-form 字段无法在输入字段中输入文本

Question

我能够使用 redux-form 呈现输入字段，但我似乎无法在该字段内键入任何文本（该组件似乎在每次击键时重新呈现）。下面是代码，我创建了一个非常简单的代码来尝试找出问题所在：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { Field, reduxForm, reducer as formReducer } from 'redux-form';

const reducers = {
  // ... your other reducers here ...
  form: formReducer     // <---- Mounted at 'form'
};

const reducer = combineReducers(reducers);
const store = createStore(reducer);

class TestForm extends Component {

  formSubmit(props) {
    console.log('form submitted');
  }

  render() {

    const { handleSubmit } = this.props;

    return (
      <div>
        This is a test form.
        <div>
          <form onSubmit={handleSubmit(this.formSubmit.bind(this))}>
            <Field name="firstField" component="input" type="text" />
            <button type="submit">Submit</button>
          </form>
        </div>
      </div>
    );
  }

}

TestForm = reduxForm({
  form: 'testingForm'
})(TestForm);

export default TestForm;

我也从官方 redux-form 文档中直接复制并粘贴了示例：http://redux-form.com/6.0.2/docs/MigrationGuide.md/，但我仍然遇到同样的问题。几个小时以来一直在努力解决这个问题。会不会是redux或者redux-form的版本？

我正在使用 redux v3.5.2 和 redux-form v6.2.1。

非常感谢任何帮助！

Answer 1

我认为您需要查看 react-redux 文档。该组件需要放置在 <Provider store={store}> 组件内。也许您是在该文件之外执行此操作，并且刚刚包含存储初始化以提供信息？

Answer 2

我遇到了同样的问题。原因是我未能将 formReducer 添加到我正在使用的 reducer 列表中。为了修复，我添加了：

import { reducer as formReducer } from 'redux-form'
const RootReducer = combineReducers({

...

   form: formReducer     // <---- Mounted at 'form'
})

redux-form 字段无法在输入字段中输入文本

redux-form Field cannot enter text into input field

reactjs

redux

redux-form

react-redux