React Bootstrapを使用した確認ボックスの実装方法

以下に、シンプルで簡単な方法とコード例を示します。

まず、React Bootstrapをインストールします。以下のコマンドを使用します:

npm install react-bootstrap

次に、Reactコンポーネント内で確認ボックスを使用するために必要なコードを追加します。

import React, { useState } from 'react';
import { Button, Modal } from 'react-bootstrap';
function ConfirmBoxExample() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleConfirm = () => {
    // 確認が完了した後の処理をここに記述します
    // 例: データの削除、フォームの送信など
    handleClose();
  };
  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        削除する
      </Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>確認</Modal.Title>
        </Modal.Header>
        <Modal.Body>本当に削除しますか？</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            キャンセル
          </Button>
          <Button variant="primary" onClick={handleConfirm}>
            削除
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}
export default ConfirmBoxExample;

上記のコードでは、useStateフックを使用してモーダルの表示状態を管理しています。handleShow関数はモーダルを表示し、handleClose関数はモーダルを非表示にします。また、handleConfirm関数はユーザーが確認を完了した後の処理を記述するために使用されます。ボタンのonClickイベントハンドラとしてこれらの関数を指定することで、ユーザーがボタンをクリックしたときにモーダルが表示されるようになります。

上記のコンポーネントを他のReactコンポーネント内で使用することで、確認ボックスを実装することができます。必要に応じて、文言やスタイルをカスタマイズすることもできます。

この方法を使用すると、React Bootstrapを利用して簡単に確認ボックスを実装することができます。