如何使用reactJS和typescript在fabric UI中验证提交表单上的多个文本字段？

import * as React from 'react';
import { TextField, PrimaryButton } from 'office-ui-fabric-react';

interface IFormState {
  field1: string;
  field2: string;
  field1Valid: boolean;
  field2Valid: boolean;
}

export class MyForm extends React.Component<{}, IFormState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      field1: '',
      field2: '',
      field1Valid: true,
      field2Valid: true,
    };
  }

  handleField1Change = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
    this.setState({
      field1: newValue || '',
      field1Valid: true,
    });
  };

  handleField2Change = (event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
    this.setState({
      field2: newValue || '',
      field2Valid: true,
    });
  };

  handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    // 验证字段1
    if (this.state.field1.trim() === '') {
      this.setState({ field1Valid: false });
    }

    // 验证字段2
    if (this.state.field2.trim() === '') {
      this.setState({ field2Valid: false });
    }

    // 如果所有字段都通过验证，则提交表单
    if (this.state.field1Valid && this.state.field2Valid) {
      // 提交表单的逻辑
    }
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <TextField
          label="字段1"
          value={this.state.field1}
          onChange={this.handleField1Change}
          errorMessage={!this.state.field1Valid ? '字段1不能为空' : undefined}
        />
        <TextField
          label="字段2"
          value={this.state.field2}
          onChange={this.handleField2Change}
          errorMessage={!this.state.field2Valid ? '字段2不能为空' : undefined}
        />
        <PrimaryButton type="submit">提交</PrimaryButton>
      </form>
    );
  }
}