單擊 React 中的鏈接時頁面重新加載

Question

我試圖在一個頁面中顯示登錄和注冊，我可以單擊顯示登錄表單的登錄鏈接。

問題是當我點擊登錄鏈接時， <a href="" onClick={() => setlogin(true)}>login?</a> ，頁面被加載 1s 然后返回注冊形式。

代碼：

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

您可以使用preventDefault來停止刷新頁面和組件login state 數據再次變為false的超鏈接的默認行為：

選項1：

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

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

選項 2：

或者，您可以使用#作為超鏈接占位符，它不會刷新頁面，而只會在瀏覽器 URL 中使用 append 一個# 。 但它可能會給你eslint 警告錨點無效：

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

選項 3：

或者，您可以使用span或button ：

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

// OR

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

...並且，使用您的或引導CSS 使其看起來像一個鏈接。

此外，不要將其留空href="" ，它將帶您到當前的 URL 位置，但仍會刷新您的頁面。