如何在ReactJS中使用一个函数来处理表单域中的错误？

import React, { useState } from 'react';

function FormWithErrorHandling() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value
    });
    validateField(name, value);
  };

  const validateField = (name, value) => {
    let fieldError = '';
    if (name === 'username') {
      if (!value) {
        fieldError = 'Username is required';
      } else if (value.length < 3) {
        fieldError = 'Username must be at least 3 characters';
      }
    } else if (name === 'email') {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!value) {
        fieldError = 'Email is required';
      } else if (!emailRegex.test(value)) {
        fieldError = 'Invalid email format';
      }
    }
    setErrors({
      ...errors,
      [name]: fieldError
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform full form validation before submitting
    const formErrors = {};
    Object.keys(formData).forEach(key => {
      validateField(key, formData[key]);
      if (errors[key]) {
        formErrors[key] = errors[key];
      }
    });
    if (Object.keys(formErrors).length === 0) {
      console.log('Form submitted:', formData);
    } else {
      setErrors(formErrors);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <p style={{ color: 'red' }}>{errors.username}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormWithErrorHandling;