如何在React / Javascript中触发表单错误处理？

import React, { useState } from 'react';

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

  // 处理表单提交
  const handleSubmit = (e) => {
    e.preventDefault();

    // 检查表单数据是否有效
    const validationErrors = validateForm(formData);

    if (Object.keys(validationErrors).length === 0) {
      // 表单数据有效，执行提交逻辑
      submitForm(formData);
    } else {
      // 表单数据无效，更新错误状态
      setErrors(validationErrors);
    }
  };

  // 更新表单数据
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  // 表单数据验证逻辑
  const validateForm = (data) => {
    let errors = {};

    if (!data.username) {
      errors.username = '请输入用户名';
    }

    if (!data.password) {
      errors.password = '请输入密码';
    }

    return errors;
  };

  // 提交表单逻辑
  const submitForm = (data) => {
    // 执行表单提交操作
    console.log('表单提交成功', data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用户名:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <span>{errors.username}</span>}
      </div>
      <div>
        <label>密码:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default Form;