网站账户创建：如何添加账户创建成功的弹窗？ ReactJS

Question

目前在我们的粉丝网站上，我们建立了一个非常简单的帐户创建功能：一旦用户完成帐户创建，他们就无法知道创建是否成功，因为我们没有弹出任何弹出窗口或任何东西。

填写完所有 3 个“电子邮件、登录 ID 和密码”字段并按“创建新帐户”后，无论创建是否成功，用户都会重定向到首页。要检查帐户创建是否成功，他们必须尝试“登录”，如果可以登录，则帐户创建确实成功，如果不能登录，则帐户创建失败。例如，该网站不允许您使用已使用过的登录 ID，因此当用户使用已使用的登录名创建帐户时，他们的帐户不会被创建，但无论如何都会被重定向到主页，而无需任何形式的操作。出现弹出窗口，提示他们的帐户创建失败。

我想实现一个在帐户创建后显示的弹出窗口，一个用于成功创建，另一个用于失败创建。

这是注册页面的代码：

import { Button } from 'react-bootstrap';
import useInput from '../../hooks/UseInput';
import axios from 'axios';
import "../../UI/navbar/auth/login.css"
import { useNavigate } from 'react-router-dom';

const isNotEmpty = (value) => value.trim() !== '';
const isEmail = (value) => value.includes('@');

function Register(props) {
    const navigate = useNavigate()

    //username input
    const {
        value: usernameValue,
        isValid: usernameIsValid,
        hasError: usernameHasError,
        valueChangeHandler: usernameChangeHandler,
        inputBlurHandler: usernameBlurHandler,
        reset: resetUsername
    } = useInput(isNotEmpty)

    //password input
    const {
        value: passwordValue,
        isValid: passwordIsValid,
        hasError: passwordHasError,
        valueChangeHandler: passwordChangeHandler,
        inputBlurHandler: passwordBlurHandler,
        reset: resetPassword
    } = useInput(isNotEmpty)

    //email input
    const {
        value: emailValue,
        isValid: emailIsValid,
        hasError: emailHasError,
        valueChangeHandler: emailChangeHandler,
        inputBlurHandler: emailBlurHandler,
        reset: resetEmail
    } = useInput(isEmail)

    let formIsValid = false
    if (usernameIsValid && emailIsValid && passwordIsValid) {
        formIsValid = true
    }

    const submitHandler = async event => {
        event.preventDefault()

        const registerInput = {
            username: usernameValue,
            email: emailValue,
            password: passwordValue
        }

        try {
            const res = await axios.post("/api/auth/register", registerInput)
            console.log(registerInput)
        } catch (error) {
            console.log(error.response?.data)
        }

        if (!formIsValid) return

        resetEmail()
        resetUsername()
        resetPassword()
        navigate("/")
    }

    const emailClasses = emailHasError ? 'form-control invalid' : 'form-control'
    const usernameClasses = usernameHasError ? 'form-control invalid' : 'form-control'
    const passwordClasses = passwordHasError ? 'form-control invalid' : 'form-control'

    return (
        <div className='centered'>
            <form onSubmit={submitHandler} className='register-box'>
                <h3 className="register-title">Create New Account</h3>
                <div className='control-group'>
                    <div className={emailClasses}>
                        <input required
                            type="email"
                            name="email"
                            value={emailValue}
                            placeholder='Email'
                            onChange={emailChangeHandler}
                            onBlur={emailBlurHandler}
                        />
                        {emailHasError && <p className="error-text">Please provide a valid Email</p>}
                    </div>
                    <div className={usernameClasses}>
                        <input required
                            type="text"
                            name="username"
                            value={usernameValue}
                            placeholder='Login ID'
                            onChange={usernameChangeHandler}
                            onBlur={usernameBlurHandler}
                        />
                        {usernameHasError && <p className="error-text">Please enter your future Login ID</p>}
                    </div>
                    <div className={passwordClasses}>
                        <input required
                            type="password"
                            name="password"
                            value={passwordValue}
                            placeholder='Password'
                            onChange={passwordChangeHandler}
                            onBlur={passwordBlurHandler}
                        />
                        {passwordHasError && <p className="error-text">Please enter your future Password</p>}
                    </div>
                </div>

                <Button disabled={!formIsValid}
                    onClick={submitHandler}
                    variant="primary"
                    type='submit'>
                    Create New Account
                </Button>
                <br></br>
                <br></br>
                <h3 className="register-title2">Account creation is currently disabled. If you wish to create a new account, send in a ticket on our discord server.</h3>
            </form>
        </div>
    )
}

export default Register

这是它的 CSS 代码：

.form-control {
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.form-control input,
.form-control label {
  display: block;
}

.form-control label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.form-control input,
.form-control select {
  width: 100%;
  font: inherit;
  padding: 5px 20px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.form-control input:focus {
  outline: none;
  border-color: #240370;
  background-color: #e0d4fd;
}

.control-group {
  display: flex;
  flex-direction: column;
  column-gap: 1rem;
  flex-wrap: wrap;
}

.control-group .form-control {
  min-width: 15rem;
  flex: 1;
}

button {
  font: inherit;
  background-color: #240370;
  color: white;
  border: 1px solid #240370;
  padding: 0.5rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
}

button:hover,
button:active {
  background-color: #33059e;
  border-color: #33059e;
}

button:disabled,
button:disabled:hover,
button:disabled:active {
  background-color: #ccc;
  color: #292929;
  border-color: #ccc;
  cursor: not-allowed;
}

.form-actions {
  text-align: right;
}

.form-actions button {
  margin-left: 1rem;
}

.invalid input {
  border: 1px solid #b40e0e;
  background-color: #fddddd;
}

.invalid input:focus {
  border-color: #ff8800;
  background-color: #fbe8d2;
}

.error-text {
  color: #b40e0e;
  text-align: center;
}

.register-box {
  /*border: 2px solid rgb(248, 249, 250);
  border-radius: 12px;*/
  /* box-shadow: 10px 10px 5px rgb(248, 249, 250); */
  display: flex;
  background-color: #141e43a1;
  flex-direction: column;
  width: 35vw;
  padding: 2vw;
  margin-bottom: 600px;
}

.register-box2 {
  /*border: 2px solid rgb(248, 249, 250);
  border-radius: 12px;*/
  /* box-shadow: 10px 10px 5px rgb(248, 249, 250); */
  display: flex;
  background-color: transparent;
  flex-direction: column;
  width: 700px;
  padding: 2vw;
}

.centered {
  display: flex;
  justify-content: center;
  margin-top: 20vh;
}

.register-title {
  color: white;
  font-family: overLock;
  font-size: 2rem;
  text-align: center;
}

.register-title2 {
  color: rgb(197, 40, 100);
  font-family: overLock;
  font-size: 2rem;
  text-shadow: 2px 2px 2px black;
  text-align: center;
}

.login_title {
  text-align: center;
  padding-top: 15px;
  margin-bottom: 0;
}

.login_button {
  margin-left: 85px;
}

制作该网站的人是 MIA，我并不是一个真正的网络开发人员或编码员，所以我来到这些论坛希望找到可以帮助我们解决这个问题的人。

如果我需要提供更多信息，请告诉我！

Answer 1

const submitHandler = async event => {
    event.preventDefault()

    const registerInput = {
        username: usernameValue,
        email: emailValue,
        password: passwordValue
    }

    try {
        const res = await axios.post("/api/auth/register", registerInput)
        console.log(registerInput)
    } catch (error) {
        console.log(error.response?.data)
    }

    if (!formIsValid) return

    resetEmail()
    resetUsername()
    resetPassword()
    navigate("/")
}

您可以将导航（“/”）移至此处

try {
        const res = await axios.post("/api/auth/register", registerInput)
        console.log(registerInput)
    navigate("/")
    } catch (error) {
        console.log(error.response?.data)
    }

这样用户只有在注册成功后才会被重定向到主页。至于popup，没那么容易，你需要懂javascript