Reactjs Redux表单提交问题

新的反应重复。提交表格有困难

我得到这个信息：

这不是一个错误，但我不完全确定该怎么办。下面是我重新创建此问题的代码。它使用本地状态在注册和登录表单之间切换。尽管render语句只返回两个表单中的一个，但不知道是否存在两个表单的问题。最好能得到一些专家建议：）

import React，{Component}来自'React'；
从“redux form”导入{Field，reduxForm}；
类登录扩展组件{
建造师（道具）{
超级（道具）；
this.state={showloginfo:false}
}
changeLoginFormState（e）{
e、 预防默认值（）；
this.state.showloginfo？this.setState（{showloginfo:false}）：this.setState（{showloginfo:true}）；
返回false；
}
handleFormSubmit（值）{
console.log（值）；
}
注册表格（{
返回(
电子邮件
密码
确认密码

登录
);
}
render（）{
if（this.state.showloginfo）{
返回此.loginForm（）；
}否则{
返回此.signUpForm（）；
}
}
}
导出默认reduxForm({
表格：“身份验证”
})（登入）；

handleSubmit

应该在您的

表单

组件之外定义，并通过道具传递给它。您的所有输入都应包装在

字段

组件中。退房

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