如何在react组件中添加验证消息

import React, { useState } from 'react';

const FormWithValidation = () => {
  const [email, setEmail] = useState('');
  const [emailError, setEmailError] = useState('');

  const validateEmail = (email) => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    if (name === 'email') {
      setEmail(value);
      if (!validateEmail(value)) {
        setEmailError('请输入有效的邮箱地址');
      } else {
        setEmailError('');
      }
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!validateEmail(email)) {
      setEmailError('请输入有效的邮箱地址');
    } else {
      // 提交表单
      console.log('表单提交成功');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">邮箱:</label>
        <input
          type="email"
          id="email"
          name="email"
          value={email}
          onChange={handleChange}
        />
        {emailError && <p style={{ color: 'red' }}>{emailError}</p>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default FormWithValidation;