ある画面でボタンを押した時や、現在のページから離脱する場合に「本当によろしいですか？」みたいなアラート（警告）表示をよく見かけることがあると思います。
今回は、そんな確認ダイアログを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 (
<div className="App">
<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をインストールします。
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 (
<div className="container">
<button onClick={this.submit}>確認ダイアログ</button>
</div>
);
}
}
これでreact-confirm-alertで確認ダイアログが作成できました。
比較的簡単に確認ダイアログができますので、ぜひ試してみてください！
Material UI（MUI）のDialogコンポーネント
最後は、Reactと共によく使われるMaterial UI（MUI）のDialogコンポーネントを使って、確認ダイアログを作成する方法を紹介します。
Dialogコンポーネントは、アプリのコンテンツの前に表示されるモーダルウィンドウの一種で、重要な情報や決定を求めるときに使います。
Dialogコンポーネントは表示されるとアプリの機能を無効にし、確認やキャンセルなどの必要なアクションが取られるまで画面に残ります。
Material UI（MUI）のインストールと設定
Dialogコンポーネントを使うには、まずMaterial UI（MUI）をインストールします。
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の値を変更します。
export default function AlertDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" onClick={handleClickOpen}>
Open alert dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"このサイトを離れますか？"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
行った変更が保存されない可能性があります。
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>同意しない</Button>
<Button onClick={handleClose} autoFocus>同意する</Button>
</DialogActions>
</Dialog>
</div>
);
}
Reactで確認ダイアログを作成する方法は以上です。
Reactは世界的によく使われるライブラリなだけあって、やりたいことはほぼ何でもできますね！
ポチップ
- Original:https://minory.org/react-confirm-dialog.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...