使用 Redux Form 的表单输入未更新

Question

我的输入字段在按键时没有更新：

import React, { Component, PropTypes } from 'react';

import { Field, reduxForm } from 'redux-form';

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city"
                   component={city =>
                     <input type="text" className="form-control" {...city.input} placeholder="enter a city for a 5 day forecast"/>
                   }
            />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: 'cityForm'
})(CitySelector);

我是否需要为文本输入提供 onChange 处理程序？

Answer 1

如果您向Field 提供自定义输入组件，那么是的，您必须调用在input 属性中传递给您的组件的onChange。事实上，您通过传播city.input 几乎是正确的，但有一个问题。

当您定义一个无状态组件（或任何函数）inside render() 方法时，它会在每次渲染时重新创建。并且因为这个无状态组件作为道具 (component) 传递给 Field，所以它会强制 Field 在每次重新创建后渲染。因此，每当CitySelector 组件呈现时，您的输入就会失去焦点，因此不会捕获任何按键。

您应该将无状态组件提取到单独的定义中：

const myInput = ({ input }) => (
  <input type="text" className="form-control" {...input} placeholder="enter a city for a 5 day forecast" />
);

class CitySelector extends Component {
  render() {
    const { isFetching, pristine, submitting, handleSubmit } = this.props;

    return (
      <form className="form-horizontal col-xs-offset-1" onSubmit={handleSubmit(this.fetchWeather)}>
        <div className="form-group">
          <div className="col-md-4 col-xs-4">
            <Field name="city" component={myInput} />
          </div>
          <div className="col-md-3 col-xs-3">
            <button type="submit" className="btn btn-success">Submit</button>
          </div>
        </div>
      </form>
    );
  }
}

它还使您的代码更清晰。

您可以在 Redux Form 的 official docs 中找到有关该问题的更多信息。请注意，您可以使用默认的input 而无需创建自己的，请查看simple form example。

Answer 2

我遇到了同样的问题，我的错误很简单。

这是我所拥有的：

import { combineReducers } from 'redux';
import { reducer as forms } from 'redux-form';

import otherReducer from './otherReducer';

export default combineReducers({ otherReducer, forms });

请注意，我将 redux-form reducer 导入为 forms 并使用 ES6 Object 属性值简写将它按原样传递给我的 combineReducers（就像我对 otherReducer 所做的那样）。

问题是用于将 redux-form reducer 传递给 combineReducers 必须 的 key 被命名为 form，所以我们要改成：

export default combineReducers({ customer, form: forms });

或

import { reducer as form } from 'redux-form';
export default combineReducers({ otherReducer, form });

希望这对其他人有所帮助...

Answer 3

如果你使用不可变数据结构，而不是：

import { reduxForm } from 'redux-form';

使用这个：

import { reduxForm } from 'redux-form/immutable';

查看这里了解更多信息http://redux-form.com/6.7.0/examples/immutable/

Answer 4

我只是遇到了与这个问题类似的问题，除了我的表单没有提交并且我的验证功能也没有触发。

这是因为：

我把它从 input 改成了别的东西，它完全破坏了 redux-form 静默

const TextInput = ({
    input,                                                 <--- DO NOT CHANGE THIS
    placeholder,
    type,
    meta: { touched, error, warning }
  }) => {
    return (
      <div className="row-md">
          <input
            placeholder={placeholder}
            type={type}
            className="form-text-input primary-border"
            {...input}                                     <--- OR THIS
          />
          {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    )
}

如果有人想研究它，这是我的其余部分：

<Field
  component={TextInput}
  type="tel"
  name="person_tel"
  placeholder="Mobile Phone Number"
  value={this.props.person_tel}
  onChange={(value) => this.props.updateField({ prop: 'person_tel', value })}
/>

Answer 5

我发现/我的问题是我的

form: formReducer

不在 rootReducer 中。

formReducer 必须在顶部。我的情况：

const rootReducer = combineReducers({
   general: generalReducer,
   data: combineReducers({
       user:userReducer,
       todoReducer
   }),
       form: formReducer
   });