Reactでポップアップメッセージとのデータのやり取り

先日Reactでポップアップメッセージを自作する方法をご紹介しました。
elsammit-beginnerblg.hatenablog.com

今回はポップアップメッセージとメインページとのデータのやり取り方法に関してまとめておこうと思います。

■前提
■ポップアップメッセージからメインページへのデータ送信
■メインページからポップアップメッセージへのデータ送信
■作成結果
■最後に
■参考

■前提

先日と同様にソースコードは下記に保存しております。
https://github.com/Elsammit/Moguratataki

また今回の方法に関しては先日の記事のコードを元に記載します。
前回の記事が気になる方はこちらをご参照ください。
elsammit-beginnerblg.hatenablog.com

■ポップアップメッセージからメインページへのデータ送信

ではまずはポップアップメッセージからメインページへのデータ送信に関してまとめていきます。
と言っても、こちらは先日のポップアップを閉じる際にご紹介した通り、

メインページを、

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

    OpenDialog = () =>{
        const {popupstate} = this.state;
        const{result} = this.state;
        let Msg:string = "score is " + result;
        if(popupstate === true){
            return <MadeDialog closeState={this.updateState.bind(this)} showMsg = {Msg}></MadeDialog> //←closeState追加
        }else{
            return <p></p>
        }
    }

とし、ポップアップメッセージを

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>
    )}
}

とします。
このコードにより、ポップアップメッセージ側でボタン押下時に、
propsで定義したcloseStateにfalseが代入されます。
メインぺージにてcloseStateが変更されたことによりupdateStateがコールバックされ、closeStateでセットしたfalseを入手できます。

今回はboolですが、数値や文字列の変数をpropsで定義し、
定義した変数でコールバック関数がコールされるようにすればポップアップメッセージで定義した数値や文字列を入手することが可能です。

■メインページからポップアップメッセージへのデータ送信

今度は逆にメインページからポップアップメッセージ側へデータを送信してみたいと思います。
今回はメインページで計算していたスコアを前回のポップアップメッセージ側に通知する方法を例にまとめていきます。

先ほどのコードから追記した点はそれぞれこちらになります。
ポップアップメッセージ(dialog.tsx)

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

export interface Props {
    closeState?:any;
    showMsg?:string; // ←追加.
}

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 className='finsMsg'>{this.props.showMsg}</p> // ←追加.
                    <p><button className='closeBtn' onClick={this.CloseDialog}>close</button></p>
                </div>
            </div>
        </div>
    )}
}

メインページ(mogura.tsx)

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

    OpenDialog = () =>{
        const {popupstate} = this.state;
        const{result} = this.state;
        let Msg:string = "score is " + result; ← メッセージ追加.
        if(popupstate === true){
            return <MadeDialog closeState={this.updateState.bind(this)} showMsg = {Msg}></MadeDialog> //←showMsg 追加
        }else{
            return <p></p>
        }
    }

追加した点ですが、
　・ポップアップメッセージ側のpropsにshowMsgを追加
　・メインページ側のMadeDialog にポップアップメッセージ側で定義したshowMsgにスコアメッセージ(Msg)を代入
です。
要するに、propsに変数を定義し、親となるメインページ側で定義された変数に数値もしくは文字列を代入することで、
親であるメインページから子であるポップアップメッセージにデータの送信が行えます。