Question

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

因此，尽管我会编写两个方法并在与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>
    );
  }
}

Answer 1

我对登录方式和从登录函数处理登录回调的方式进行了更改，基本上是在登录回叫中调用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>
    );
  }
}

Answer 2

将函数调用更改为

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

不能调用onSubmit的两个方法反应

2 个答案: