Reduxフォーム提出問題

Question

React-Reduxに新しい。フォームを送信できません。

私はこのメッセージを得る：

エラーではありませんが、私はこれをどうするかを完全にはよく分かりません。この問題を再現する私のコードは以下の通りです。これは、ローカル状態を使用してサインインフォームとサインインフォームを切り替えます。レンダーステートメントは2つのフォームのうちの1つだけを返しますが、2つのフォームを持つことが問題です。一部の専門家の助言:)

import React, { Component } from 'react'; 
import { Field, reduxForm } from 'redux-form'; 

class Login extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { showLoginForm: false } 
    } 

    changeLoginFormState(e) { 
    e.preventDefault(); 
    this.state.showLoginForm ? this.setState({showLoginForm: false}) : this.setState({showLoginForm: true}); 
    return false; 
    } 

    handleFormSubmit(values) { 
    console.log(values); 
    } 

    signUpForm() { 
    return (
     <div> 
     <div className="auth-container"> 
      <form className="centerform" onSubmit={this.handleFormSubmit}> 
      <fieldset> 
       <label htmlFor="email">Email</label> 
       <input type="email" id="email" className="form-field" id="email"/> 
      </fieldset> 
      <fieldset> 
       <label htmlFor="password">Password</label> 
       <input type="password" className="form-field" id="password"/> 
      </fieldset> 
      <fieldset> 
       <label htmlFor="passwordConfirm">Confirm Password</label> 
       <input type="password" className="form-field" id="passwordConfirm"/> 
      </fieldset> 

      <p><a onClick={e => this.changeLoginFormState(e)}>If you already have an account, Login here</a></p> 
      <button className="btn btn-auth">Sign Up</button> 
      </form> 
     </div> 
     </div> 
    ); 
    } 

    loginForm() { 
    return (
     <div> 
     <div className="auth-container"> 
      <form className="centerform" onSubmit={this.handleFormSubmit}> 
      <fieldset> 
       <label htmlFor="email">Email</label> 
       <Field name="email" component="input" type="email" id="email" className="form-field"/> 
      </fieldset> 
      <fieldset> 
       <label htmlFor="password">Password</label> 
       <Field name="password" component="input" type="password" id="password" className="form-field"/> 
      </fieldset> 
      <fieldset> 
       <label htmlFor="passwordConfirm">Confirm Password</label> 
       <Field name="passwordConfirm" component="input" type="password" id="passwordConfirm" className="form-field"/> 
      </fieldset> 

      <p><a href="#" 
        onClick={e => this.changeLoginFormState(e)}>Don't have an account? Sign Up Here</a></p> 
      <button className="btn btn-auth">Login</button> 
      </form> 
     </div> 
     </div> 
    ); 
    } 

    render() { 
    if (this.state.showLoginForm) { 
     return this.loginForm(); 
    } else { 
     return this.signUpForm(); 
    } 
    } 
} 

export default reduxForm({ 
    form: 'authentication' 
})(Login); 

Answer 1

handleSubmitがFormコンポーネントあなたの外で定義や小道具を経由して、それに渡される必要があり得るために素晴らしいことです。すべての入力はFieldコンポーネントにラップされている必要があります。チェックアウトexamples