ReactJS实现账号创建成功/失败弹窗的技术求助

现有粉丝网站注册功能存在体验问题：用户填写Email、LoginID、Password后点击「Create New Account」，无论账号创建成功或失败（如LoginID已存在），都会直接重定向到首页，无任何即时反馈，用户需通过登录才能验证结果。以下是基于提供的React代码和CSS实现弹窗提示的修改方案。

一、修改Register组件代码 #

添加状态管理弹窗的显示状态、提示类型（成功/失败）和提示消息，同时调整提交逻辑，根据接口返回结果触发弹窗后再决定是否跳转首页。

修改后的完整代码：

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

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

function Register(props) {
    const navigate = useNavigate()
    // 新增弹窗状态管理
    const [showAlert, setShowAlert] = useState(false);
    const [alertType, setAlertType] = useState('success'); // success/error
    const [alertMessage, setAlertMessage] = useState('');

    //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()

        if (!formIsValid) return

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

        try {
            await axios.post("/api/auth/register", registerInput)
            // 设置成功弹窗
            setAlertType('success');
            setAlertMessage('账号创建成功！即将跳转首页');
            setShowAlert(true);
            // 重置表单
            resetEmail()
            resetUsername()
            resetPassword()
            // 延迟跳转，让用户看到提示
            setTimeout(() => {
                navigate("/")
            }, 2000);
        } catch (error) {
            // 设置失败弹窗，优先取接口返回的错误信息，否则用默认提示
            setAlertType('error');
            setAlertMessage(error.response?.data?.message || '账号创建失败，请检查LoginID是否已存在或信息是否正确');
            setShowAlert(true);
        }
    }

    const closeAlert = () => {
        setShowAlert(false);
    }

    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'>
            {/* 新增弹窗组件 */}
            {showAlert && (
                <div className={`alert alert-${alertType}`}>
                    <span>{alertMessage}</span>
                    <button className="alert-close" onClick={closeAlert}>×</button>
                </div>
            )}
            <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}
                    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

关键修改点：

• 引入useState管理弹窗的显示状态、类型和消息内容
• 调整submitHandler逻辑：先校验表单有效性，再发送请求；成功时触发成功弹窗并延迟2秒跳转首页，失败时触发错误弹窗且不跳转
• 新增弹窗JSX结构，添加手动关闭按钮
• 移除Button上重复绑定的onClick事件，避免重复触发提交

二、添加弹窗样式到CSS文件 #

在提供的CSS代码末尾追加以下样式：

/* 弹窗样式 */
.alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    border-radius: 4px;
    color: white;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.alert-success {
    background-color: #2ecc71;
}

.alert-error {
    background-color: #e74c3c;
}

.alert-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
}

.alert-close:hover {
    color: #f0f0f0;
}

三、功能说明 #

• 成功弹窗自动显示2秒后跳转首页，用户也可点击关闭按钮提前关闭
• 失败弹窗不会自动跳转，用户关闭弹窗后可修改表单重新提交
• 错误消息优先使用后端接口返回的message字段，若无则使用默认提示

内容的提问来源于stack exchange，提问作者enimox