javascript - Material UI Modal 状态变化的空白页

Question

嘿，我已经尝试了很多东西，但我似乎无法让这件事发挥作用 有谁知道为什么会发生这里是我的代码

    import {Button,Modal} from "@material-ui/core";
import {useState} from "react";

import RegisterBody from '../Register/RegisterForm'
import LoginBody from '../Login/LoginForm'

const UserModel = () => {
    const [isOpen, setIsOpen] = useState(false)
    const [isLoginModel, setLoginModel] = useState();


    const [MainModelBody] = useState(LoginBody);

    function handleRegister() {
        if (!isLoginModel) {
            console.log("Register")
            //Todo: Send Register Request
        } else {
            MainModelBody.setState(RegisterBody)
            setLoginModel(false)
        }
    }

    function handleSignIn() {
        if (isLoginModel) {
            console.log("Login")
            //Todo: send Sign in request
        } else {
            MainModelBody.setState(LoginBody)
            setLoginModel(true)
        }
    }

    function handleUserModel() {
        setIsOpen(!isOpen)
    }

    return (
        <>
            <Button className="userActionButton" onClick={handleUserModel}>Sign In</Button>

            <Modal open={isOpen}
                   onClose={!isOpen}
                   disablePortal
                   disableEnforceFocus
                   disableAutoFocus
                   aria-labelledby="simple-modal-title"
                   aria-describedby="simple-modal-description"

            >
                <div className = 'UserModel'>
                    <LoginBody/>
                    <Button onClick={handleRegister}>Register</Button>
                    <Button onClick={handleSignIn}>Sign In</Button>
                </div>
            </Modal>
        </>
    );
}

export default UserModel

登录正文

import {useState} from 'react';

import  LoginElements from './LoginElements';
import {FormControl} from "@material-ui/core";

const LoginForm = ()=> {
    const [email, setEmail]  = useState('')
    const [password, setPassword]  = useState('')

    const handleSubmit = (e) => {
        e.preventDefault();
        const user = {email, password}
        console.log(user)
    };

    return (
      <div className="form">
          <FormControl noValidate autoComplete="off" onSubmit={handleSubmit}>
              <LoginElements
                  email={email}
                  password={password}
                  setEmail={setEmail}
                  setPassword={setPassword}
              />
          </FormControl>
      </div>
    );
}
export default LoginForm;

登录元素

import {Button, TextField} from "@material-ui/core";

const LoginElements = (props) => {
    return (
        <>
            <TextField label="Email" type="email" required value={props.email} onChange={(e) => props.setEmail(e.target.value)}/>
            <br/>
            <TextField label="Password" type="password" required value={props.password} onChange={(e) => props.setPassword(e.target.value)}/>
            <br/>
            <Button variant="contained" type="submit">Login</Button>
            <Button variant="contained" type="register">Register</Button>
            <br/>
            <label>{props.email}</label>
            <label>{props.password}</label>
        </>
    )
}

export default LoginElements;

注册主体

    import {useState} from 'react';

import  RegisterElements from './RegisterElements';

const LoginForm = ()=> {
    const [email, setEmail]  = useState('')
    const [confirmEmail, setConfirmEmail]  = useState('')
    const [password, setPassword]  = useState('')
    const [confirmPassword, setConfirmPassword]  = useState('')

    const handleSubmit = (e) => {
        e.preventDefault();
        const user = {email, password}
        console.log(user)
    };

    return (
        <div className="form">
            <form  noValidate autoComplete="off" onSubmit={handleSubmit}>
                <RegisterElements
                    email={email}
                    confirmEmail={email}
                    password={password}
                    confirmPassword={password}
                    setEmail={setEmail}
                    setConfirmEmail={setEmail}
                    setPassword={setPassword}
                    setConfirmPassword={setPassword}
                />
            </form>
        </div>
    );
}
export default LoginForm;

注册元素

import {Button, TextField} from "@material-ui/core";

const RegisterElements = (props) => {
    return (
        <>
            <TextField label="Confirm Email" type="email" required value={props.email}
                       onChange={(e) => props.setEmail(e.target.value)}/>
            <TextField label="Confirm Email" type="email" required value={props.confirmEmail}
                       onChange={(e) => props.setConfirmEmail(e.target.value)}/>
            <br/>
            <TextField label="Password"
                       type="password"
                       required value={props.password}
                       onChange={(e) => props.setPassword(e.target.value)}/>
            <TextField label="Confirm Password" required value={props.confirmPassword}
                       onChange={(e) => props.setConfirmPassword(e.target.value)}/>
            <br/>
            <Button variant="contained" type="Login">Login</Button>
            <Button variant="contained" type="submit">Login</Button>

            <label>{props.email}</label>
            <label>{props.password}</label>
        </>
    )
}

export default RegisterElements;

我对糟糕的代码表示歉意，我是 react 新手

标签： javascriptreactjsmaterial-ui

Answer 1

您正在“切换”isLoginModel状态，但您只LoginBody在 JSX 中呈现。

您应该能够使用状态并有条件地将or组件isLoginModel渲染到模态体中。确实不需要额外的状态来保存组件引用。LoginBodyRegisterBody

import {Button,Modal} from "@material-ui/core";
import {useState} from "react";

import RegisterBody from '../Register/RegisterForm'
import LoginBody from '../Login/LoginForm'

const UserModel = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [isLoginModel, setLoginModel] = useState(true); // login by default

  function handleRegister() {
    if (!isLoginModel) {
      console.log("Register");
      // TODO: Send Register Request
    } else {
      setLoginModel(false);
    }
  }

  function handleSignIn() {
    if (isLoginModel) {
      console.log("Login");
      // TODO: send Sign in request
    } else {
      setLoginModel(true);
    }
  }

  function handleUserModel() {
    setIsOpen(isOpen => !isOpen);
  }

  return (
    <>
      <Button className="userActionButton" onClick={handleUserModel}>Sign In</Button>

      <Modal open={isOpen}
        onClose={!isOpen}
        disablePortal
        disableEnforceFocus
        disableAutoFocus
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        <div className='UserModel'>
          {isLoginModel ? <LoginBody /> : <RegisterBody />} // <-- condition render
          <Button onClick={handleRegister}>Register</Button>
          <Button onClick={handleSignIn}>Sign In</Button>
        </div>
      </Modal>
    </>
  );
}