单击 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 状态数据再次变为false：

选项 1：

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

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

选项 2：

或者，您可以使用# 作为超链接占位符，它不会刷新页面，只会在浏览器 URL 中附加一个#。但它可能会给你eslint warning that anchor is invalid：

<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>

...并且，使用您的或bootstrap CSS 使其看起来像一个链接。

另外，不要将其留空href=""，它会将您带到当前的 URL 位置，但仍会刷新您的页面。