登录后关闭模态React

Question

我必须在modals中使用我的Login.js组件：在第一个中，模式不应该在登录后关闭; 在第二个，它必须关闭。

我正在试图弄清楚如何处理第二种情况：我试过这个但它不起作用：我在父语中编写了一个closeAfterLogin方法并尝试在子closeAfterLogin中触发它。

Login.js：

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

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

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


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

  render() {
    return (
      <div>
        <form onSubmit={this.login}>
          <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>
    );
  }
}

父组件：

import React from 'react';
import Modal from 'react-modal';
import { Meteor } from 'meteor/meteor';

import LoginForm from './LoginForm';
import SignUpForm from './SignUpForm';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

Modal.setAppElement('#app')

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

    this.state = {
      modalIsOpen: false,
      hasAnAccount: true
    };

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.toggleHasAnAccount = this.toggleHasAnAccount.bind(this);
    this.closeAfterLogin = this.closeAfterLogin.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

    toggleHasAnAccount() {
    this.setState(prevState => ({
      hasAnAccount: !prevState.hasAnAccount
    }));
  };

  closeAfterLogin() {
    this.setSate({modalIsOpen: false});
    console.log(this.state.modalIsOpen);
  }

  render() {
    return (
      <div>
        <Modal
          isOpen={this.props.modalIsOpen}
          onRequestClose={this.props.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={this.props.closeModal} type="button" className="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          { this.state.hasAnAccount ? (
            <LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
            <SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
          }
        </Modal>
      </div>
    );
  }
}

任何想法 ？

Answer 1

您没有调用closeAfterLogin prop函数。 在名称后面添加()以调用它。

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

Answer 2

您需要将closeAfterLogin方法称为

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

在关闭按钮的onClick属性中，您将closeModal方法称为this.props.closeModal ，这应该如下所示，因为在LoginModalParent组件本身中声明了closeModal方法

   render() {
    return (
      <div>
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <button onClick={this.closeModal} type="button" className="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          { this.state.hasAnAccount ? (
            <LoginForm toggleHasAnAccount={this.toggleHasAnAccount} closeAfterLogin={this.closeAfterLogin}/>) : (
            <SignUpForm toggleHasAnAccount={this.toggleHasAnAccount} />)
          }
        </Modal>
      </div>
    );
  }