redux-form v6：表單提交已取消，因爲表單未連接

Question

我在控制檯中收到此錯誤。

「表單提交取消了，因爲形式沒有連接」，試圖從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); 

我傳遞了我的提交處理函數爲道具，以我的實際形式，其中包含輸入的字段組件。 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/

Answer 2

使用給我的回答以上我只是想澄清我做了什麼來解決問題。

我抓住了來自reduxForm的handleSubmit方法，並將它從容器中作爲道具傳遞給LoginForm，該容器也從道具中檢索它。

我還從LoginForm組件上的redux-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> 
     );