reactjs - 想要在 React 中的 App 组件中单击 SignUp 时转到 SignUp 页面，有人可以相应地纠正代码吗

Question

App Component:

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 = () => {
        localStorage.setItem("isLoggedInn", "1");
        setIsLoggedIn(true);
      };
      const logoutHandler = () => {
        localStorage.removeItem("isLoggedInn");
        setIsLoggedIn(false);
      };
      // const saveData = (enteredUsername, enteredPassword) => {
      //   const userPassData = {
      //     'username':enteredUsername,
      //     'password':enteredPassword
      //   };
      //   return userPassData;
      // }
      return (
        <div>
          {!isLoggedIn && <LoginForm adminUser={user} onLogin={loginHandler} />}
          {isLoggedIn && <HomePage onLogout={logoutHandler} />}
        </div>
      );
    }

    export default App;

LoginForm Component:

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();
                console.log(enteredUsername,enteredPassword);
            }
            else{
                setTrue(false);
                setIsClicked(true);
            }
        }
        const onClickHandler =()=>{
            setIsClicked(true);
        }
        return(
            <>
            <form onSubmit={onSubmitHandler}>
                <h1>Welcome</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>
                {!isClicked? '' :<SignUp/>}
            </>
        );
    }
    export default LoginForm;
 

想要在 React 中的 App 组件中单击 SignUp 时转到 SignUp 页面，有人可以相应地纠正代码。不知道我错在哪里，有人可以帮助我。有一个注册按钮，当用户名和密码与添加的用户或管理员不同时，单击该按钮将进入注册页面注册新用户。

注册组件：

import './SignUp.module.css';
    const SignUp = (props) =>{
        return(
            <div>
                <h2>SignUp page</h2>
            </div>
        );
    }
    export default SignUp;

标签： reactjs

Answer 1

如果您只需要基于表单组件呈现其中一个，则您的 SignUp 位于 Form 组件下方，isClicked那么您可以使用ternary运算符来执行此操作。

如下更改您的代码

 <>
      {isClicked ? (
        <SignUp />
      ) : (
        <form onSubmit={onSubmitHandler}>
          <h1>Welcome</h1>
          <div>
            <h1>Login</h1>
            <input
              type="text"
              value={enteredUsername}
              placeholder="Enter Username"
              onChange={onChangeHandlerUsername}
            ></input>
            <input
              type="password"
              value={enteredPassword}
              placeholder="Enter Password"
              onChange={onChangeHandlerPassword}
            ></input>
            <div>
              <button>Sign In</button>
            </div>
            <div>
              <button onClick={onClickHandler} type="button">
                Sign Up
              </button>
            </div>
            <div>
              <a href="#top">Forget Password</a>
            </div>
          </div>
        </form>
      )}
    </>

你也不应该这样做

  const onChangeHandlerUsername = event =>{
            setEnteredUsername(event.target.value);

            // This will always be false because the state change wont reflect immediately.
            // Please remove this for both the username and password

            if(event.target.value === enteredUsername){
                setTrue(true);
            }
        }