时间戳

首页 > 解决方案 > 不能调用两个方法 onSubmit 反应

javascript - 不能调用两个方法 onSubmit 反应

问题描述

我有一个登录组件，它应该在两种情况下可重用：在第一种情况下，父模式在登录后不会关闭；在第二种情况下，它会在登录后关闭。

所以我虽然我会编写两种方法并在与onSubmit. 但我得到这个错误：

未捕获的 ReferenceError：未定义登录

这是我的组件：

import React from 'react';
import { Meteor } from 'meteor/meteor';

export default class LoginForm extends React.Component {
  constructor() {
    super();

    this.handleLogin = this.handleLogin.bind(this);
    this.login = this.login.bind(this);
    this.closeModalAfterLogin = this.closeModalAfterLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    login();
    closeModalAfterLogin();
  }

  login() {
    let email = this.refs.email.value.trim();
    let password = this.refs.password.value.trim();
    Meteor.loginWithPassword({email}, password, err =>{
      console.log('Login Callback', err);
    })
  }

  closeModalAfterLogin() {
    if (this.props.closeAfterLogin) {
      this.setState({modalIsOpen: false});
      console.log('closing modal');
    }
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <div className="form-group">
            <input type="email" ref="email" className="form-control" id="login-form-input-email" placeholder="email"/>
          </div>
          <div className="form-group">
            <input type="password" ref="password" className="form-control" id="login-form-input-password" placeholder="mot de passe"/>
          </div>
          <button type="submit" className="btn btn-primary">Connexion</button>
        </form>
        <p>Pas encore de compte ? <a onClick={this.props.toggleHasAnAccount}>Inscrivez-vous</a></p>
      </div>
    );
  }
}

标签： javascriptreactjs

解决方案

我对您调用登录的方式进行了更改，并从您的登录函数处理登录回调，基本上this.closeModalAfterLogin()是在您的登录回调中调用。

import React from 'react';
import { Meteor } from 'meteor/meteor';

export default class LoginForm extends React.Component {

  constructor(){
      super();
      this.state = {
        modalIsOpen: false
      }
  }
  handleLogin = () => {
    let email = this.refs.email.value.trim();
    let password = this.refs.password.value.trim();
    Meteor.loginWithPassword({email}, password, err => {
      if(err){
        console.log('Login Error callback', err);
      }else{
          console.log('Login Success');
          this.closeModalAfterLogin();
      }
    })
  }

  closeModalAfterLogin = () => {
    this.setState({ modalIsOpen: false });
    console.log('closing modal');
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <div className="form-group">
            <input type="email" ref="email" className="form-control" id="login-form-input-email" placeholder="email"/>
          </div>
          <div className="form-group">
            <input type="password" ref="password" className="form-control" id="login-form-input-password" placeholder="mot de passe"/>
          </div>
          <button type="submit" className="btn btn-primary">Connexion</button>
        </form>
        <p>Pas encore de compte ? <a onClick={this.props.toggleHasAnAccount}>Inscrivez-vous</a></p>
      </div>
    );
  }
}

推荐阅读