Bootstrap下拉菜单-单击内部链接时隐藏菜单

时间:2019-07-10 19:41:02

标签: javascript reactjs twitter-bootstrap

有效的方法: 我有一个带有Bootstrap 4类的下拉菜单,当我单击按钮时,这些下拉菜单会隐藏到Google,Facebook或Firebase中,而这些事件都有要登录的事件。

什么不起作用 但是,只要我单击“忘记密码”或“注册”链接,页面就会更改为所选路线,但是下拉列表会继续显示并且不会隐藏。

我需要什么帮助: 找出隐藏下拉菜单的正确方法是单击两个链接之一:“忘记密码”和“注册”

class Signin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      email: "",
      password: ""
    };

//handleInputEmail function here
//handleInputPassword function here
//Firebase signIn function here
//handleSubmit function here

render() {
    render() {
    return (
      <div className="nav-item dropdown">
        <a
          className="nav-link dropdown-toggle"
          href="#"
          id="navbarDropdown"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
          onClick={this.handleLoggedIn}
        >
          Iniciar Sesión
        </a>
        <ul id="login-dp" className="dropdown-menu">
          <li>
            <div className="row">
              <div className="col-md-12">
                <form
                  className="form"
                  accept-charset="UTF-8"
                  id="login-nav"
                  onSubmit={this.handleSubmit}
                >
                  <div className="form-group">
                    <label className="sr-only" for="exampleInputEmail2">
                      Correo Electrónico
                    </label>
                    <input
                      type="email"
                      className="form-control"
                      id="exampleInputEmail2"
                      placeholder="Correo Electrónico"
                      required
                      onChange={this.handleInputEmail}
                    />
                  </div>
                  <div className="form-group">
                    <label className="sr-only" for="exampleInputPassword2">
                      Contraseña
                    </label>
                    <input
                      type="password"
                      className="form-control"
                      id="exampleInputPassword2"
                      placeholder="Contraseña"
                      required
                      onChange={this.handleInputPassword}
                    />
                  </div>
                  <div className="checkbox">
                    <label>
                      <input type="checkbox" /> Recordarme
                    </label>
                  </div>

                  //ONCE CLICKED THIS LINK, THE DROPDOWN WILL NOT CLOSE, IT REMAINS OPEN 

                  <div className="help-block text-detail">
                    <Link to="/forgotpassword">
                      Forgot password?
                    </Link>
                  </div>
                  <button type="submit" className="btn btn-primary btn-block">
                    Iniciar Sesión
                  </button>
                  <hr />
                  <p className="text-center text-detail">O también puedes</p>
                  <button
                    class="btn btn-block btn-primary btn-facebook"
                    onClick={this.props.signInWithFacebook}
                  >
                    <FaFacebookF /> Continuar con Facebook
                  </button>
                  <button
                    class="btn btn-block btn-primary btn-google"
                    onClick={this.props.signInWithGoogle}
                  >
                    <FaGoogle /> Continuar con Gmail
                  </button>
                  <div className="bottom text-center mt-2 text-detail">
                    Aún no tienes cuenta?
                    <br />

                    //ONCE CLICKED THIS LINK, THE DROPDOWN WILL NOT CLOSE, IT REMAINS OPEN 

                      <Link to="/register">
                      <b>Register</b>
                    </Link>
                  </div>
                </form>
              </div>
            </div>
          </li>
        </ul>
      </div>
    );

0 个答案:

没有答案