Question

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

我收到此消息：

不是错误，但我不完全确定该如何处理。我重新编写此问题的代码如下。它使用本地状态在注册和登录表单之间切换。想知道是否有两个表单是问题，尽管render语句只返回两个中的一个。获得一些专家建议会很棒：）

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

Redux表单提交问题

1 个答案: