Reactで確認ダイアログ（confirm）を表示させる3つの方法

2023年4月4日

URLをコピーしました！

ある画面でボタンを押した時や、現在のページから離脱する場合に「本当によろしいですか？」みたいなアラート（警告）表示をよく見かけることがあると思います。
今回は、そんな確認ダイアログをReactで表示させる方法をご紹介します！

Reactで確認ダイアログを作成する方法はいくつかありますが、基本的なものから、react-confirm-alertというライブラリを使った方法、それからMaterial UI（MUI）のDialogコンポーネントを使った方法をご紹介します。

onBeforeunloadイベント

Reactでは、onBeforeunloadイベントをwindowオブジェクトに登録することで、ページを離れる前にカスタムメッセージや確認ダイアログを表示することができます。

onBeforeunloadイベントで確認ダイアログを表示

例えば、以下のようなコードでonBeforeunloadイベントを登録してみましょう。

import React, { useEffect } from "react";

function App() {

// onBeforeunloadイベントのハンドラー関数

const handleBeforeUnload = (e) => {

// ページ遷移やリロードのキャンセル

e.preventDefault();

// カスタムメッセージの設定（ブラウザによっては無視される）

e.returnValue = "本当にページを離れますか？";

};

// コンポーネントがマウントされた時にイベントを登録

useEffect(() => {

window.addEventListener("beforeunload", handleBeforeUnload);

// コンポーネントがアンマウントされた時にイベントを解除

return () => {

window.removeEventListener("beforeunload", handleBeforeUnload);

};

}, []);

return (

<h1>React onBeforeunload Example</h1>

<p>このページから離れるときに警告が表示されます。</p>

</div>

);

}

export default App;

【余談】window.confirmも使える

もちろんですが、Reactと言えどベースはJavaScriptなので、Reactでも以下のようにJavaScript標準のwindow.confirmを使った確認ダイアログは表示できます。

const navigate = useNavigate();

const handlePageBack = () => {

　　const confirm = window.confirm("このページを離れます。\n本当によろしいですか？");

　　if (confirm) {

　　　　navigate("/bangumihyo", { state }); // 画面遷移

　　}

しかし、カスタマイズ性が低いという欠点があります。
もし、より柔軟に確認ダイアログを表示したい場合は、自作するか、ライブラリを利用することをおすすめします。

react-confirm-alertライブラリ

例えば、react-confirm-alertというライブラリは、window.confirmのように簡単に使えるだけでなく、スタイルやコールバックも設定できます。
react-confirm-alertは以下のような手順で使うことができます。

react-confirm-alertのインストールと設定

まず、react-confirm-alertをインストールします。

1	npm install react-confirm-alert --save

次に、react-confirm-alertとそのスタイルシートをインポートします。

import React from 'react';

import { confirmAlert } from 'react-confirm-alert'; // Import

import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

確認ダイアログを表示する関数を作成

そして、確認ダイアログを表示する関数を作ります。
この関数では、confirmAlertメソッドにオプションオブジェクトを渡します。
オプションオブジェクトには、title、message、buttonsなどのプロパティがあります。
buttonsはラベルとonClickイベントハンドラーを持つオブジェクトの配列です。

submit = () => {

confirmAlert({

title: 'Confirm to submit',

message: 'Are you sure to do this.',

buttons: [

{

label: 'はい',

onClick: () => alert('Click Yes')

{

label: 'いいえ',

onClick: () => alert('Click No')

}

]

});

};

ボタン表示コンポーネント作成

最後に、この関数を呼び出すボタンをレンダリングするコンポーネントを作ります。

class App extends React.Component {

render() {

return (

<button onClick={this.submit}>確認ダイアログ</button>

</div>

);

}

これでreact-confirm-alertで確認ダイアログが作成できました。
比較的簡単に確認ダイアログができますので、ぜひ試してみてください！

Material UI（MUI）のDialogコンポーネント

最後は、Reactと共によく使われるMaterial UI（MUI）のDialogコンポーネントを使って、確認ダイアログを作成する方法を紹介します。

Dialogコンポーネントは、アプリのコンテンツの前に表示されるモーダルウィンドウの一種で、重要な情報や決定を求めるときに使います。
Dialogコンポーネントは表示されるとアプリの機能を無効にし、確認やキャンセルなどの必要なアクションが取られるまで画面に残ります。

Dialogコンポーネントは意図的に処理を中断するので、必要最小限に使用するべきです

Material UI（MUI）のインストールと設定

Dialogコンポーネントを使うには、まずMaterial UI（MUI）をインストールします。

1	npm install @mui/material @emotion/react @emotion/styled

次に、Dialogコンポーネントとその関連コンポーネント（DialogTitle、DialogContent、DialogContentText、DialogActions）も一緒にインポートします。

import * as React from 'react';

import Button from '@mui/material/Button';

import Dialog from '@mui/material/Dialog';

import DialogActions from '@mui/material/DialogActions';

import DialogContent from '@mui/material/DialogContent';

import DialogContentText from '@mui/material/DialogContentText';

import DialogTitle from '@mui/material/DialogTitle';

Dialogコンポーネントで確認ダイアログ作成

そして、Dialogコンポーネントをレンダリングする関数を作ります。
この関数では、openというステート変数とそれを更新するsetOpenという関数をuseStateフックで定義します。
openは確認ダイアログが開いているかどうかを表す真偽値です。
setOpenはボタンのonClickイベントハンドラーで呼び出してopenの値を変更します。