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

我传递我的提交处理函数作为我的实际表单的prop，它包含输入的Field组件。 loginAction将链接到redux的操作，以将值发送到后端并重定向到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方法，并将其作为来自容器的道具传递给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>
        );

redux-form v6：表单提交已取消，因为表单未连接

2 个答案: