单击 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 位置，但仍会刷新您的页面。