Question

我正在更改登录功能的逻辑。我有一个按钮指向signUp，一个按钮指向signIn。 signUp有效，但是signIn无效，我不确定为什么当它们都导致启动api请求以登录用户的相同功能时。

状态：

state = {
    controls: {
      email: {
        elementType: "input-email",
        elementConfig: {
          type: "email",
          placeholder: "Email Address"
        },
        value: localStorage.getItem("email") || "",
        validation: {
          required: true, // must not be empty
          isEmail: true
        },
        valid: false,
        touched: false
      },
      password: {
        elementType: "input",
        elementConfig: {
          type: "password",
          placeholder: "Password"
        },
        value: "",
        validation: {
          required: true,
          minLength: 6
        },
        valid: false,
        touched: false
      }
    },
    isSignUp: true,
    rememberMe: false
  };

使用两个按钮登录表单代码：


 return (
      <div className={classes.Auth}>
        {isLoggedIn}
        {errorMessage}
        <p className={classes.signUp}>Sign up to create a burger</p>
        <form onSubmit={this.handleSubmit}>
          {form}
          <Button btnType="Success">SIGN UP </Button>
        </form>
        <p className={classes.subText}>
          Already have an account? Switch to sign in below:
        </p>
        <Button clicked={this.signInHandler} btnType="Danger">
          SIGN IN
        </Button>
      </div>
    );

两个按钮的处理程序：

Signup处理程序（有效）：

  handleSubmit = event => {
    this.props.onAuth(
      this.state.controls.email.value,
      this.state.controls.password.value,
      this.state.isSignUp
    );
    event.preventDefault();
  };

SignIn处理程序，然后还调用handleSubmit：

 signInHandler = () => {
    this.setState(
      { isSignUp: false }, // should be false to kick off the api for the SignIn
      () => {                        // callback
        this.handleSubmit(); // calls the method above which signs user in 
      }
    );
  };

我遵循了这个stackoverflow线程来编写这一部分： setState doesn't update the state immediately

这是我单击“登录”按钮时得到的错误

TypeError: Cannot read property 'preventDefault' of undefined

有什么想法吗？

Answer 1

您缺少事件参数。这应该起作用：

signInHandler = (e) => {
   this.setState(
     { isSignUp: false }, // should be false to kick off the API for the SignIn
     () => {                        // callback
       this.handleSubmit(e); // calls the method above which signs user in 
     }
   );
 };

Answer 2

您正在呼叫handleSubmit = event =>，但未发送处理提交的事件，请将其添加到流程中

 <Button clicked={e=>this.signInHandler(e)} ... />



 signInHandler = e => {
    this.setState(
      { isSignUp: false }, // should be false to kick off the api for the SignIn
      () => {                        // callback
        this.handleSubmit(e); // calls the method above which signs user in 
      }
    );
  };

setState更新状态，但是作为第二个参数的回调函数将不会执行

2 个答案: