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 新手

Answer 1

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

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

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>
    </>
  );
}