React窗体中的onSubmit验证问题

import React, { Component } from 'react';

class FormComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      errors: {},
    };
  }

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

  validateForm = () => {
    const { username, password } = this.state;
    const errors = {};

    // 验证用户名
    if (username.trim() === '') {
      errors.username = '用户名不能为空';
    }

    // 验证密码
    if (password.trim() === '') {
      errors.password = '密码不能为空';
    }

    this.setState({ errors });

    return Object.keys(errors).length === 0;
  }

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

    if (this.validateForm()) {
      // 表单验证通过，可以进行提交操作
      // ...
    }
  }

  render() {
    const { username, password, errors } = this.state;

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

export default FormComponent;