reactjs - redux-form v6 : Form submission canceled because the form is not connected

Question

我在控制台中收到此错误。

“表单提交已取消，因为表单未连接”

自从我们将应用程序迁移到更新版本的 React 后，尝试将我的 redux-form 从 v5 迁移到 v6 之后。

我不确定这里出了什么问题，所以我想我可以使用第二双或第三双眼睛。

这是我的“智能组件”

import React, { PropTypes } from 'react';
import { reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
import { logUserIn } from '../../actions/authentication';
import { VALID_EMAIL_REGEX } from '../../config/app_config';
import LoginForm from './LoginForm';

const FORM_ID = 'loginForm';

export class LoginFormContainer extends React.Component {

  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
    loginAction: PropTypes.func.isRequired,
  };

  performLogin = (params) => {
    const { loginAction } = this.props;
    const credentials = {
      email: params.email,
      password: params.password,
    };
    loginAction(credentials, '/home');
  }

  render() {
    const { handleSubmit, submitting } = this.props;
    return (
      <LoginForm
        handleSubmit={ handleSubmit }
        loginFunction={ this.performLogin }
        submitting={ submitting }
      />
    );
  }
}

const validate = values => {
  const errors = {};
  if (!values.email || values.email === '') {
    errors.email = 'Required';
  }
  else if (!VALID_EMAIL_REGEX.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  if (!values.password || values.password === '') {
    errors.password = 'Required';
  }
  return errors;
};

LoginFormContainer = reduxForm({
  form: FORM_ID,
  validate,
})(LoginFormContainer);

export default connect(null, {
  loginAction: logUserIn,
})(LoginFormContainer);

我将提交处理程序函数作为 Prop 传递给包含输​​入字段组件的实际表单。 loginAction 将链接到 redux 的操作，以将值发送到后端并重定向到主页。

import React, { PropTypes } from 'react';
import { Field } from 'redux-form/immutable';
import { getClassName, checkButtonDisabled } from '../../utils/forms';
import { Link } from 'react-router';

const renderInput = (field) => {
  return (
    <div className={ getClassName(field.meta.touched, field.meta.error) }>
      <input
        {...field.input}
        className="form-control form-control-success"
        type={field.type}
      />
      {field.meta.touched &&
       field.meta.error &&
       <span className="error">{field.meta.error}</span>}
    </div>
  );
};

export default class LoginForm extends React.Component {

  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    loginFunction: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
  };

  render() {
    const {
      loginFunction,
      submitting } = this.props;

    return (
      <form onSubmit={ loginFunction.bind(this) }>
        <fieldset>
          <div>
            <label className="form-control-label">
              Email address&nbsp;
            </label>
            <Field
              name="email"
              component={renderInput}
              type="text"
              placeholder="example@exampledomain.com"
            />
          </div>

          <div>
            <label className="form-control-label">
              Password&nbsp;
            </label>
            <Field
              name="password"
              component={renderInput}
              type="password"
              placeholder="your password"
            />
          </div>

        </fieldset>
        <button
          type="submit"
          className="btn btn-primary"
          disabled={ checkButtonDisabled(submitting) }
        >
          Log In
        </button>&nbsp;
        <Link to="/forgot-password">Forgot Password?</Link>
      </form>
    );
  }
}

我成功地使表单正常工作，但是当我点击登录时，我收到上面的错误，并且我被重定向到主页，但我没有经过身份验证，并且也收到 422 错误。我无法判断我的表单连接是否是唯一的错误，或者我的操作是否未从表单提交功能获取正确的信息。

有什么建议吗？

Answer 1

您被重定向回家，因为您的 loginFunction()已被解雇，但表单未提交

有几件事需要更新。您的<form>标签必须有一个相应的 id，并且它应该通过将函数传递给 redux-form 来处理提交内置提交处理程序。所以你修改LoginForm下面的类应该使表单正常工作

<form id="loginForm" onSubmit={  handleSubmit(this.loginFunction.bind(this)) } >

有关内部的更多信息 redux-form方法handleSubmit这里:http://redux-form.com/6.5.0/docs/api/Form.md/