Reactでのフォーム送信時にBootstrapモーダルを閉じる方法

モーダル内にフォームを作成し、フォームのonSubmitイベントハンドラーでモーダルを閉じる:

import React, { useState } from 'react';
import { Button, Modal, Form } from 'react-bootstrap';
const MyModal = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信処理を行う
    // モーダルを閉じる
    handleClose();
  };
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        モーダルを開く
      </Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>モーダルタイトル</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form onSubmit={handleSubmit}>
            {/* フォームの内容 */}
            <Button variant="primary" type="submit">
              送信
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
};
export default MyModal;

モーダル外にフォームを作成し、フォームのonSubmitイベントハンドラーでモーダルを閉じる:

import React, { useState } from 'react';
import { Button, Modal, Form } from 'react-bootstrap';
const MyModal = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームの送信処理を行う
    // モーダルを閉じる
    handleClose();
  };
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        モーダルを開く
      </Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>モーダルタイトル</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* モーダル外にフォームを作成 */}
          <Form onSubmit={handleSubmit}>
            {/* フォームの内容 */}
            <Button variant="primary" type="submit">
              送信
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
};
export default MyModal;

これらの方法を使用すると、Reactでフォームの送信時にBootstrapモーダルを閉じることができます。選択した方法に応じて、コードをカスタマイズしてください。また、必要に応じて追加のスタイリングや機能を適用することもできます。