1

redux-form使用这个模板安装,附加减速器并检查它在 redux devtools 中运行良好。

我可以看到打字时动作流程很好,但每次击键后表单值和输入都是空的。

控制台中没有错误,我找不到任何线索。

我遗漏了一些小东西,可能是组件渲染或者可能是关于反应版本......

我的包裹:

"react": "15.3.2",
"redux-form": "^6.2.0",

我的登录表格:

import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';


const renderField = ({ input, label, type, meta: { touched, error } }) => {
  console.log(input);
  return (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} placeholder={label} type={type} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  );
};

class FormLogin extends React.Component { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    handleSubmit: React.PropTypes.func
  };
  render() {
    const { error, handleSubmit } = this.props;
    return (
      <div>
        <input type="text" name="ah1" />
        <form onSubmit={handleSubmit}>
          <input type="text" name="ah2" />
          <div>
            <Field id="username" name="username" type="text" component={renderField} label="Username" />

          </div>
          <div>
            <Field id="password" name="password" type="text" component={renderField} label="Password" />
          </div>
          {error && <strong>{error}</strong>}
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default reduxForm({
  form: 'FormLogin'
})(FormLogin);
4

2 回答 2

4

对我来说,我没有将reducer 命名为示例中的确切名称,不幸的是,这导致了这个难以调试的错误。

确保如示例所示,reducer 列为“form:formReducer”。

于 2016-12-14T21:17:29.290 回答
1

如果有人来这里寻找答案,就会发现问题。

有一个 hack 可以修复它。你可以在这里找到更多: https ://github.com/mxstbr/react-boilerplate/issues/958

于 2016-11-06T21:09:22.883 回答