Redux 表单提交问题

Question

React-Redux 的新手。提交表单时遇到问题。

我收到这条消息：

不是错误，但我不完全确定该怎么做。我重现此问题的代码如下。它使用本地状态在注册和登录表单之间切换。想知道是否有两种形式是问题所在，尽管渲染语句只是 returns 两者之一。如果能得到一些专家建议就太好了:)

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 组件之外定义并通过 props 传递给它。您的所有输入都应包含在 Field 组件中。查看 examples

Redux 表单提交问题

Redux Form Submitting Issue

reactjs

redux

redux-form