redux-form v6：由于表单未连接，表单提交被取消

Question

我的控制台出现这个错误。

"Form submission canceled because the form is not connected"

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

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

这是我的 "Smart Component"

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);

我将我的提交处理程序函数作为道具传递给我的实际表单，该表单包含用于输入的 Field 组件。 loginAction 将 link 到 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 class 如下应该让表格工作

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

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

Answer 2

使用上面给我的答案，我只是想澄清我为解决问题所做的工作。

我抓取了来自 reduxForm 的 handleSubmit 方法，并将其作为容器的道具传递给 LoginForm，容器也从道具中检索它。

我还在 LoginForm 组件上从 redux-form 导入了 Form 组件，只是简单地将普通的 JSX 标签替换为 .

这是我所做的最后更改。

LoginForm.jsx:

//Added Form from redux-form
import { Field, Form } from 'redux-form/immutable';
    render() {
        const {
          handleSubmit,//defined handleSubmit function from props which comes from the reduxForm being exported to the state.
          loginFunction,
          submitting } = this.props;

        return (
          //replaced <form></form> with <Form></Form>
          <Form id="loginForm" onSubmit={ handleSubmit(loginFunction.bind(this)) }>
          //passed my loginFunction into the handleSubmit function
          //added an id to <Form> that corresponds to the forms id that was passed in reduxForm({ form: 'loginForm' })
            <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>
        );