如何在React组件中验证条件表单域？

import React, { Component } from 'react';

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

  // 其他组件代码...

}

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

validateField = (fieldName, value) => {
  let { errors } = this.state;

  switch (fieldName) {
    case 'username':
      errors.username = value.length < 5 ? '用户名至少需要5个字符' : '';
      break;
    case 'password':
      errors.password = value.length < 8 ? '密码至少需要8个字符' : '';
      break;
    case 'confirmPassword':
      errors.confirmPassword = value !== this.state.password ? '确认密码与密码不匹配' : '';
      break;
    default:
      break;
  }

  this.setState({ errors }, this.validateForm);
}

validateForm = () => {
  const { errors, username, password, confirmPassword } = this.state;
  const isFormValid = !errors.username && !errors.password && !errors.confirmPassword && username && password && confirmPassword;
  this.setState({ isFormValid });
}

handleSubmit = (event) => {
  event.preventDefault();
  if (this.state.isFormValid) {
    // 执行表单提交操作
  } else {
    // 显示错误信息或其他处理
  }
}

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

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