单击 React 中的链接时页面重新加载

Question

I'm trying to show login and signup in just one page, that I can click on a login link that shows me the login form.

The problem is that when I click on the login link , <a href="" onClick={() => setlogin(true)}>login?</a> , the page gets loaded for 1s and then returns to sign up form.

Code:

import React, { ReactElement, Fragment, useState } from "react";

function LoginSignUp() {
  const [login, setlogin] = useState(false);

  return (
    <Fragment>
      {login ? (
        <form className="form-signin">
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
          />
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
          />
          <button type="submit">Sign in</button>
        </form>
      ) : (
        <form className="form-signup">
          <input
            type="text"
            name="username"
            className="form-control"
            placeholder="Username"
            required
          />
          <input
            type="email"
            name="email"
            className="form-control"
            placeholder="Email address"
            required
          />
          <input
            type="password"
            name="password"
            className="form-control"
            placeholder="Password"
            required
          />
          <input
            type="password"
            name="password2"
            className="form-control"
            placeholder="Confirm Password"
            required
          />
          <button type="submit">Sign Up</button>
        </form>
      )}
      <p id="logintxt">
        Do you already have an account? ,{" "}
        <a href="" onClick={() => setlogin(true)}>
          login?
        </a>
      </p>
    </Fragment>
  );
}

Answer 1

You can use preventDefault to stop the default behavior of hyperlink which refreshed your page and component's login state data became false again:

Option 1:

function handleClick(e) {
  e.preventDefault()
  setlogin(true)
}

<a href="/" onClick={handleClick}>login?</a>

Option 2:

Or, you can use # as hyperlink placeholder, it won't refresh the page but will just append a # in browser URL. But it may give you eslint warning that anchor is invalid :

<a href="#" onClick={handleClick}>login?</a>

Option 3:

Or, you can use a span or button :

<span onClick={handleClick}>login?</span>

// OR

<button type="button" onClick={handleClick} class="btn btn-link">login?</button>

... and, make it look like a link using your or bootstrap CSS.

Also, don't leave it blank href="" , it will take you to the current URL location but will still refresh your page.