ReactJS -如何在提交表单时记录导致400错误代码的特定字段

import React, { useState } from 'react';

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

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

  const handleSubmit = (e) => {
    e.preventDefault();

    // 检查字段值是否符合要求
    const newErrors = {};
    if (formData.username.trim() === '') {
      newErrors.username = '用户名不能为空';
    }
    if (formData.password.trim() === '') {
      newErrors.password = '密码不能为空';
    }

    // 如果有错误字段，更新错误对象
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // 提交表单逻辑
    // ...

    // 清空表单字段
    setFormData({
      username: '',
      password: '',
    });
  };

  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 MyForm;