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>
);
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.