Next. js функция запускается автоматически при рендеринге - PullRequest
Новая
       19

Next. js функция запускается автоматически при рендеринге

0 голосов
/ 24 апреля 2020

Я пытался ввести логин Facebook в моем веб-приложении. Я установил npm response-facebook-login пакет и добавил на свою страницу. Это приложение Next. js. 

import GoogleLogin from "react-google-login";
import FacebookLogin from "react-facebook-login";
import { useState } from "react";

export default function SignIn(props) {
  const [error, seterror] = useState("");
  const fbLogin = (response) => {
    console.log(response);
  };
  const handleLogin = (e) => {
    e.preventDefault();
    console.log("submitted");
  };

  const goToSignup = () => {
    props.sw(1);
  };
  return (
    <div className="row">
      <form onSubmit={handleLogin} className="col-lg-6 mx-auto">
        <div className="form-group">
          <label htmlFor="emailtext">Email address</label>
          <input
            type="email"
            className="form-control"
            id="emailtext"
            aria-describedby="emailHelp"
            placeholder="Enter email"
          />
        </div>
        <div className="form-group">
          <label htmlFor="passwordtext">Password</label>
          <input
            type="password"
            className="form-control"
            id="passwordtext"
            placeholder="Password"
          />
          <div className="invalid-feedback">{error}</div>
        </div>
        <button
          type="button"
          onClick={handleLogin}
          className="btn btn-success btn-md btn-block">
          Login
        </button>
        <div className="row my-3">
          <div className="col-md-6">
            <FacebookLogin
              appId="12345"
              autoLoad={true}
              textButton="Login"
              cssClass="btn btn-primary btn-lg"
              fields="name,email,picture"
              callback={fbLogin}
            />
          </div>
          <div className="col-md-6">
            {/* <GoogleLogin
              clientId="23588703635-36mmqtriv4ivqsjnki0tm7r0mpuos91g.apps.googleusercontent.com"
              onSuccess={googleLogin}
              autoLoad={true}
              onFailure={googleFailure}
              cookiePolicy={"single_host_origin"}
            /> */}
          </div>
        </div>
        <div className="text-center">
          <button onClick={goToSignup} className="btn btn-link">
            Sign up
          </button>
          <span className="px-2">|</span>
          <a>Forgot Password?</a>
        </div>
      </form>
      <style jsx>
        {`
          .loginform {
            width: 50%;
          }
        `}
      </style>
    </div>
  );
}

Но всплывающее окно входа в Facebook запускается автоматически, и я не нажимаю кнопку. (на странице перезагрузить или запустить.) Я просто хочу, чтобы функция запускалась при нажатии. Это все. Вот изображение для визуальной помощи. Я получил это, когда я пошел по ссылке. Скриншот

...