React-Bootstrap:如何提交水平表单？

import React from 'react';
import { Form, Button } from 'react-bootstrap';

class HorizontalForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    // 在这里处理表单提交逻辑
    console.log('Form submitted');
  };

  render() {
    return (
      <Form onSubmit={this.handleSubmit} className="form-horizontal">
        <Form.Group controlId="formHorizontalEmail">
          <Form.Label column sm={2}>
            Email
          </Form.Label>
          <Form.Control type="email" placeholder="Email" />
        </Form.Group>

        <Form.Group controlId="formHorizontalPassword">
          <Form.Label column sm={2}>
            Password
          </Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>

        <Form.Group as={Row} className="justify-content-center">
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form.Group>
      </Form>
    );
  }
}

export default HorizontalForm;

handleSubmit = async (event) => {
  event.preventDefault();
  const formData = new FormData(event.target);
  try {
    const response = await fetch('/api/submit-form', {
      method: 'POST',
      body: formData,
    });
    if (response.ok) {
      console.log('Form data submitted successfully');
    } else {
      console.error('There was an error submitting the form');
    }
  } catch (error) {
    console.error('Error:', error);
  }
};