redux-form v6：フォームが接続されていないため、フォームの送信がキャンセルされました

Question

私のコンソールにこのエラーが表示されています。私たちが反応のより新しいバージョンに我々のアプリを移行するのでV6するV5から私のReduxのフォームを移行しようとした後

「フォームが接続されていないため、キャンセルフォームの提出」。

ここで何がうまくいかないのか分かりませんので、2番目または3番目の目を使うことができました。

はここに私の「Smartコンポーネント」

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は、値をバックエンドに送信して家にリダイレクトするためのreducexアクションにリンクします。

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に渡しました。

また、redux-formからFormFormコンポーネントをLoginFormコンポーネントにインポートし、通常のJSXタグを単に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> 
     );