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

Question

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

“表单提交因表单未连接而取消”

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

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

这是我的“智能组件”

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 将链接到 redux 的 action 以将值发送到后端并重定向到 home。

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/

Answer 2

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

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

我还在 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>
        );