Reactでポップアップメニューを自作する

今回はReactでポップアップメニューを自作する方法に関してまとめていきます。

先日から活用しているモグラたたきアプリに関して、終了時に終了メッセージを表示させていたのですが、
当初alertを用いて実装していました。

ただ、、
alert表示場所が中央に表示されないので分かりにくい！！
ということで中央に表示させるべく、ポップアップメッセージを自作することに。

■最終系

今回作成したポップアップメッセージはこちら。

このように、終了したらポップアップメッセージを中央に表示させることが出来ました。

■ソースコードに関して

ソースコードは下記に保存しております。
GitHub - Elsammit/Moguratataki

■自作ポップアップメッセージを作成

まずは表示させるポップアップメッセージを作成していきます。
コードはこちら。
[dialog.tsx]

import React from 'react';
import "./dialog.css";

export default class MadeDialog extends React.Component<Props> {
    CloseDialog = () => {
    }

    render() {
        return (
        <div>
            <div className="overlay">   
                <div className="content">
                    <p className='finsMsg'>"Game Finish!!"</p>
                    <p><button className='closeBtn' onClick={this.CloseDialog}>close</button></p>
                </div>
            </div>
        </div>
    )}
}

メッセージ表示とボタンが配置されたwindowを1つ用意しているのみになります。
ボタンをクリックするとCloseDialog関数がコールされます。

■モグラたたき終了時にポップアップメニューを表示

では終了時に先ほど作成したポップアップメニューを表示させてみます。

まず先ほど作成したポップアップメッセージを表示させるためには、

import MadeDialog from './dialog'
<MadeDialog></MadeDialog>

というように作成したクラスをimportし、付与した名前でタグを生成すればOKです。

今回のケースはモグラたたき終了時にポップアップメッセージですので、

    OpenDialog = () =>{
        const {popupstate} = this.state;
        const{result} = this.state;
        if(popupstate === true){
            return <MadeDialog></MadeDialog>
        }else{
            return <p></p>
        }
    }

といったOpenDialog関数を作成し、
popupstateがtrueの時にMadeDialogがコールされポップアップメッセージが表示。
falseの時に別タグがコールされポップアップメッセージ非表示としました。
今回は割愛しますが、モグラたたき終了時にpopupstateをtrueにするようにしています。

■ポップアップメッセージを閉じる処理を追加

先ほどのコードでモグラたたきが終了すればpopupstateがtrueになり、
自作ポップアップメッセージが表示されます。

しかし、現在のコードではポップアップメッセージを閉じることが出来ません。
そこで次にポップアップを閉じるための処理を追加していきます。

まずはポップアップメッセージclass側を改造し、ボタンをクリックした時にcloseするための処理を追加していきます。
コードはこちら。

import React from 'react';
import "./dialog.css";

 //追加
export interface Props { 
    closeState?:any;
}

export default class MadeDialog extends React.Component<Props> {
    CloseDialog = () => {
        this.props.closeState(false); //←追加
    }

    render() {
        return (
        <div>
            <div className="overlay">   
                <div className="content">
                    <p className='finsMsg'>"Game Finish!!"</p>
                    <p><button className='closeBtn' onClick={this.CloseDialog}>close</button></p>
                </div>
            </div>
        </div>
    )}
}

追加したのは、

export interface Props { 
    closeState?:any;
}

と

    CloseDialog = () => {
        this.props.closeState(false); //←追加
    }

です。
closeStateを定義してボタンがクリックされた時に、closeStateにfalseをセットしています。

次にモグラたたき側のコードを変更していきます。
変更箇所はこちら。

   // 追加.
    updateState = (state:boolean)=>{
        this.setState({popupstate:state});
    }

    OpenDialog = () =>{
        const {popupstate} = this.state;
        const{result} = this.state;
        if(popupstate === true){
            return <MadeDialog closeState={this.updateState.bind(this)}></MadeDialog> //←closeState追加
        }else{
            return <p></p>
        }
    }

MadeDialogタグですが、

<MadeDialog closeState={this.updateState.bind(this)}}></MadeDialog>

の通り、closeState={this.updateState.bind(this)}}を付与しております。
こちらはcloseStateが変化した時にupdateState関数がコールバックされるコードになります。
そして、updateState関数ですが

    updateState = (state:boolean)=>{
        this.setState({popupstate:state});
    }

と定義しております。
updateState関数の引数であるstateですが、今回はcloseStateの値が格納されます。
先ほどのポップアップメッセージ側でボタンをクリックした際にfalseがセットされるので、
popupstateにはfalseがセットされます。

これでボタンをクリックした際に、
closeStateにfalse ⇒ updateState関数コール ⇒ popupstateにfalseがセット ⇒ ポップアップメッセージが閉じる
が実現出来ました。

■最後に

これでモグラたたき終了時に、
　・popupstateがtrueになりポップアップメッセージが表示
　・ポップアップメッセージのボタンクリックでpopupstateがfalseになりポップアップメッセージが閉じる
が実現出来ました。

長々と書いてしまいましたが、
案外簡単に実装できるので試してみてください。

■参考

Reactの基礎を学ぶのにモーダルウィンドウはいい教材 | アールエフェクト
【初心者でもわかる】アラートや確認ダイアログを画面中央に表示する方法 - Qiita
Reactでエラーメッセージを表示する - Qiita