React JS动态添加HTML问题：注册表单密码不匹配提示失效

你的代码存在几个核心问题，导致无法实现密码不匹配的错误提示功能，逐个拆解说明：

1. useRef 绑定语法错误 #

你在JSX中写的是 <div useRef={div}>，这是完全错误的——React中绑定ref的属性是ref，而非useRef。这会导致div.current始终为null，调用div.appendChild()时直接抛出Cannot read property 'appendChild' of null的错误。

2. 违背React数据驱动的设计逻辑 #

React是通过**状态（state）**来控制视图渲染的，手动使用document.createElement操作原生DOM属于反模式：不仅容易引发DOM更新冲突，还会破坏React虚拟DOM的渲染流程。

3. 状态变量未声明 #

代码中用到的registerEmail、password、confirmPassword均未通过useState声明，直接使用会触发undefined相关错误，导致表单逻辑完全无法运行。

修正后的完整代码 #

采用React状态管理错误提示，才是符合框架设计的正确做法：

import React from 'react'
import Navbar from './components/Navbar'
import { Link } from 'react-router-dom'
import './Register.css'
import { useState } from 'react'
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from './firebase'

function Register() {
    // 声明表单状态变量
    const [registerEmail, setRegisterEmail] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    // 用state管理密码错误提示
    const [passwordError, setPasswordError] = useState('');

    const handleSubmit = event => {
        // 先清空之前的错误提示
        setPasswordError('');
        
        if (password !== confirmPassword) {
            setPasswordError("Passwords do not match, please try again.");
            event.preventDefault();
            return;
        }

        // 密码匹配时执行注册逻辑
        createUserWithEmailAndPassword(auth, registerEmail, password)
            .then((userCredential) => {
                const user = userCredential.user;
                // 注册成功后的逻辑，例如跳转首页
            })
            .catch((error) => {
                setPasswordError(error.message); // 显示Firebase返回的注册错误
                event.preventDefault();
            });
    }

    return (
        <>
            <Navbar />
            <div className='signup-div'>
                <div>
                    <h2>Register</h2>
                    <form onSubmit={handleSubmit}>
                        <input 
                            className='input input_email' 
                            type="email" 
                            placeholder='Email Address' 
                            value={registerEmail} 
                            onChange={e => setRegisterEmail(e.target.value)} 
                            required 
                        /> <br />
                        <input 
                            className='input input_password' 
                            type="password" 
                            placeholder='Set password' 
                            value={password} 
                            onChange={e => setPassword(e.target.value)} 
                            required 
                        /> <br />
                        <input 
                            className='input input_password' 
                            type="password" 
                            placeholder='Confirm password' 
                            value={confirmPassword} 
                            onChange={e => setConfirmPassword(e.target.value)} 
                            required 
                        /> <br />
                        {/* 仅当错误信息存在时渲染提示 */}
                        {passwordError && <p className="error-message">{passwordError}</p>}
                        <button type='submit' className='register-button'>Register</button>
                        <Link to='/signin'>Already have an account? Sign In</Link>
                    </form>
                </div>
            </div>
        </>
    )
}

export default Register;

关键改进点 #

• 用useState统一管理表单输入和错误提示状态，完全遵循React数据驱动视图的逻辑。
• 错误提示的渲染由passwordError状态控制，状态变化时React自动更新DOM，无需手动操作原生DOM。
• 修复了Firebase注册参数错误：原代码误将confirmPassword作为密码传入，修正为password。
• 统一处理注册失败场景，将Firebase返回的错误信息也展示给用户。

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