reactjs - 单击取消时无法返回登录表单

问题描述

当我单击 SignUp.js 中的取消按钮时，我无法返回登录表单。如果有人可以提供帮助，我不知道该怎么做。
应用程序.js
import LoginForm from "./Component/LoginForm/LoginForm";
import HomePage from "./Component/HomePage/HomePage";
import { useState, useEffect } from "react";
function App() {
  const user = [{ username: "admin" }, { password: "admin" }];
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const isUserLoggedIn = localStorage.getItem("isLoggedInn");
    if (isUserLoggedIn === "1") {
      setIsLoggedIn(true);
    }
  }, []);

  const loginHandler = (username, password) => {
    localStorage.setItem("isLoggedInn", "1");
    setIsLoggedIn(true);
    localStorage.setItem("currentUsername", username);
    localStorage.setItem("currentPassword", password);
  };
  const logoutHandler = () => {
    localStorage.removeItem("isLoggedInn");
    setIsLoggedIn(false);
  };
  const onSaveDataHandler = (newData) => {
    console.log(newData);
    console.log("inside app");
  };
  const dataFormHandler = (username, password) => {
    return [
      localStorage.getItem("currentUsername"),
      localStorage.getItem("currentPassword"),
    ];
  };
  return (
    <div>
      {!isLoggedIn && (
        <LoginForm
          adminUser={user}
          onLogin={loginHandler}
          onSaveData={onSaveDataHandler}
          dataForm={dataFormHandler}
        />
      )}
      {isLoggedIn && (
        <HomePage onLogout={logoutHandler} user={dataFormHandler()} />
      )}
    </div>
  );
}

export default App;

LoginForm.js

import styles from "./LoginForm.module.css";
import { useState } from "react";
import SignUp from "../SignUp/SignUp";
const LoginForm = (props) => {
  const [enteredUsername, setEnteredUsername] = useState("");
  const [enteredPassword, setEnteredPassword] = useState("");
  const [isTrue, setTrue] = useState(true);
  const [isClicked, setIsClicked] = useState(false);

  const onChangeHandlerUsername = (event) => {
    setEnteredUsername(event.target.value);
    if (event.target.value === enteredUsername) {
      setTrue(true);
    }
  };
  const onChangeHandlerPassword = (event) => {
    setEnteredPassword(event.target.value);
    if (event.target.value === enteredPassword) {
      setTrue(true);
    }
  };
  const onSubmitHandler = (event) => {
    event.preventDefault();
    if (
      enteredUsername === props.adminUser[0].username &&
      enteredPassword === props.adminUser[1].password
    ) {
      props.onLogin(enteredUsername,enteredPassword);
      // props.dataForm(enteredUsername,enteredPassword);
    } else {
      setTrue(false);
    }
  };
  const onClickHandler = () => {
    setIsClicked(true);
  };
  const sendDataToChild = (entereduserData) =>{
    const userData = {
      ...entereduserData,
      id: Math.random().toString()
    };
    props.onSaveData(userData);
  }
  return (
    <>
      {isClicked &&
      enteredUsername !== props.adminUser[0].username &&
      enteredPassword !== props.adminUser[1].password ? (
        <SignUp dataTransfer={sendDataToChild} clk={isClicked}/>
      ) : (
        <form onSubmit={onSubmitHandler}>
          <h1 className={styles.blink_me}>W E L C O M E</h1>
          <div className={`${styles.box} ${!isTrue && styles.wrong}`}>
            <h1>Login</h1>
            <input
              type="text"
              value={enteredUsername}
              placeholder="Enter Username"
              className={styles.email}
              onChange={onChangeHandlerUsername}
            ></input>
            <input
              type="password"
              value={enteredPassword}
              placeholder="Enter Password"
              className={styles.email}
              onChange={onChangeHandlerPassword}
            ></input>
            <div>
              <button className={styles.btn}>Sign In</button>
            </div>
            <div>
              <button
                onClick={onClickHandler}
                type="button"
                className={styles.btn2}
              >
                Sign Up
              </button>
            </div>
            <div>
              <a href="#top">Forget Password</a>
            </div>
          </div>
        </form>
      )}
    </>
  );
};
export default LoginForm;

SignUp.js

import styles from "./SignUp.module.css";
import { useState, useEffect } from "react";
const SignUp = (props) => {
  const [enteredUsername, setUsername] = useState("");
  const [enteredFirstname, setFirstname] = useState("");
  const [enteredLastname, setLastname] = useState("");
  const [enteredPassword, setPassword] = useState("");
  const [isFormValid, setIsFormValid] = useState();
  useEffect(() => {
    setIsFormValid(
      enteredUsername.trim().length > 0 &&
        enteredFirstname.trim().length > 0 &&
        enteredLastname.trim().length > 0 && 
        enteredPassword.trim().length>0
    );
  }, [enteredUsername, enteredFirstname, enteredLastname, enteredPassword]);

  const onUserChangeHandler = (event) => {
    setUsername(event.target.value);
  };
  const onFirstChangeHandler = (event) => {
    setFirstname(event.target.value);
  };
  const onLastChangeHandler = (event) => {
    setLastname(event.target.value);
  };
  const onPassChangeHandler = (event) => {
    setPassword(event.target.value);
  };
  const onBtnSubmitHandler = (event) => {
    event.preventDefault();
    const userData = {
      username: enteredUsername,
      firstname: enteredFirstname,
      lastname: enteredLastname,
      password: enteredPassword,
    };
    props.dataTransfer(userData);
    setUsername("");
    setFirstname("");
    setLastname("");
    setPassword("");
  };
  return (
    <>
      <div className={styles.input}>
        <form onSubmit={onBtnSubmitHandler}>
        <h2>SignUp Page</h2>
          <label htmlFor="fname">User Name: </label>
          <input
            type="text"
            id="uname"
            onChange={onUserChangeHandler}
            name="username"
            value={enteredUsername}
            placeholder="Your username.."
          />
          <br />
          <label htmlFor="lname">First Name: </label>
          <input
            type="text"
            id="fname"
            onChange={onFirstChangeHandler}
            name="firstname"
            value={enteredFirstname}
            placeholder="Your first name.."
          />
          <br />
          <label htmlFor="lname">Last Name: </label>
          <input
            type="text"
            id="lname"
            onChange={onLastChangeHandler}
            value={enteredLastname}
            name="lastname"
            placeholder="Your last name.."
          />
          <br />
          <label htmlFor="lname">Password: </label>
          <input
            type="password"
            id="pass"
            onChange={onPassChangeHandler}
            value={enteredPassword}
            name="pass"
            placeholder="Your Password.."
          />
          <br />
          <button className={styles.btn} disabled={!isFormValid}>
            Save
          </button>
          <button className={styles.btn1} type="button">
            Cancel
          </button>
        </form>
      </div>
    </>
  );
};
export default SignUp;
标签： reactjs
reactjs - 单击取消时无法返回登录表单

问题描述

解决方案

推荐阅读
