面试题：React表单验证中复杂条件渲染逻辑实现

Question

在一个注册表单中，有用户名、密码、确认密码和邮箱字段。要求：当密码和确认密码不一致时，通过条件渲染在确认密码输入框下方显示错误提示；当邮箱格式不正确（简单判断包含 '@' 符号）时，在邮箱输入框下方显示错误提示。请用React编写相关的条件渲染逻辑及验证函数。

Answer 1

import React, { useState } from 'react';

// 验证邮箱格式函数
const validateEmail = (email) => {
    return email.includes('@');
};

const RegistrationForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [email, setEmail] = useState('');
    const [passwordError, setPasswordError] = useState('');
    const [emailError, setEmailError] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (password!== confirmPassword) {
            setPasswordError('密码和确认密码不一致');
        } else {
            setPasswordError('');
        }
        if (!validateEmail(email)) {
            setEmailError('邮箱格式不正确');
        } else {
            setEmailError('');
        }
        if (!passwordError &&!emailError) {
            // 执行注册逻辑
            console.log('注册成功');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>用户名：
                <input
                    type="text"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
            </label>
            <br />
            <label>密码：
                <input
                    type="password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                />
            </label>
            <br />
            <label>确认密码：
                <input
                    type="password"
                    value={confirmPassword}
                    onChange={(e) => setConfirmPassword(e.target.value)}
                />
                {passwordError && <span style={{ color:'red' }}>{passwordError}</span>}
            </label>
            <br />
            <label>邮箱：
                <input
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                />
                {emailError && <span style={{ color:'red' }}>{emailError}</span>}
            </label>
            <br />
            <button type="submit">注册</button>
        </form>
    );
};

export default RegistrationForm;