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

我在控制台中收到此错误

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

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

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

这是我的“智能组件”

import React，{PropTypes}来自'React'；
从'redux form/immutable'导入{reduxForm}；
从'react redux'导入{connect}；
从“../../actions/authentication”导入{logUserIn}；
从“../../config/app_config”导入{VALID_EMAIL_REGEX}”；
从“/LoginForm”导入LoginForm；
const FORM_ID='loginForm'；
导出类LoginFormContainer扩展React.Component{
静态类型={
handleSubmit:PropTypes.func.isRequired，
提交：PropTypes.bool.isRequired，
登录操作：需要PropTypes.func，
};
performLogin=（参数）=>{
const{loginAction}=this.props；
常量凭据={
电子邮件：params.email，
密码：params.password，
};
登录（凭证，“/主页”）；
}
render（）{
const{handleSubmit，submiting}=this.props；
返回(
);
}
}
常量验证=值=>{
常量错误={}；
如果（！values.email | | values.email==''）{
errors.email='必需'；
}
否则如果（！VALID_EMAIL_REGEX.test（values.EMAIL））{
errors.email='无效的电子邮件地址'；
}
如果（！values.password | | values.password==“”）{
errors.password='Required'；
}
返回错误；
};
LoginFormContainer=reduxForm({
表格：表格编号，
验证
})（LoginFormContainer）；
导出默认连接（空{
登录操作：logUserIn，
})（LoginFormContainer）；

我将提交处理程序函数作为一个道具传递给包含输入字段组件的实际表单。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>
    );
  }
}

import React，{PropTypes}来自'React'；
从'redux form/immutable'导入{Field}；
从“../../utils/forms”导入{getClassName，checkButtonDisabled}；
从“反应路由器”导入{Link}；
常量renderInput=（字段）=>{
返回(
{field.meta.com&&
field.meta.error&&
{field.meta.error}
);
};
导出默认类LoginForm扩展React.Component{
静态类型={
handleSubmit:PropTypes.func.isRequired，
loginFunction:PropTypes.func.isRequired，
提交：PropTypes.bool.isRequired，
};
render（）{
常数{
登录功能，
提交}=this.props；
返回(
电子邮件地址
密码
登录
忘记密码了？
);
}
}

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

---

有什么建议吗？

您被重定向回家，因为您的

loginFunction（）

已启动，但表单未提交

有几件事需要更新。您的

标记必须具有相应的id，并且它应该通过将您的函数传递给

redux form

内置提交处理程序来处理提交。因此，按如下方式修改

LoginForm

类应该可以使表单正常工作

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

---

关于内部

redux表单

方法

handleSubmit

的更多信息，请点击此处：

使用上面给我的答案，我只想澄清一下我是如何解决这个问题的

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

我还从LoginForm组件上的redux表单导入了表单组件，只是简单地用替换了普通的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表单添加表单
从'redux Form/immutable'导入{Field，Form}；
render（）{
常数{
handleSubmit，//从props定义handleSubmit函数，该函数来自导出到状态的reduxForm。
登录功能，
提交}=this.props；
返回(
//替换为
//将我的loginFunction传递到handleSubmit函数
//向添加了一个id，该id对应于在reduxForm中传递的表单id（{form:'loginForm'}）
电子邮件地址
密码
登录
忘记密码了？
);

谢谢，这很有帮助。我知道我错过了最后一件事。

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