【React】JavaScriptでポップアップを実装する方法

今後、再び使う機会がありそうなので、備忘録としてまとめ。
今回は、JavaScript でポップアップを表示させる方法についてです。
なお、使用しているフレームワークは React です。

参考に…というかコードをコピペさせていただいたサイトはこちら。

Simple react popup example
https://codepen.io/bastianalbers/pen/PWBYvz

なお、こちらは、下記の記事からリンクされていたサイトです。

JavaScriptを使ったポップアップウィンドウの表示方法｜CodeCampus
https://blog.codecamp.jp/programming-javascript-pop-up

上記の記事では、CSS や jQuery、React だけでなく、AngularJS や WordPress のプラグインについてのリンクもあり、かなり種類豊富です。
また、Reactについてはコピー＆ペーストで使えるので、かなり助かりました…！

実装のためのコードは下記のとおりです。
■HTML

<div id="content"></div>

■CSS

h1 {
  margin: 0;
  padding: 0;
}
html, body, .app {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100vh;
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0,0,0, 0.5);
}
.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
}

■JavaScript

class Popup extends React.Component {
  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
          <button onClick={this.props.closePopup}>close me</button>
        </div>
      </div>
    );
  }
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false
    };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  render() {
    return (
      <div className='app'>
        <button onClick={this.togglePopup.bind(this)}>show popup</button>
        {this.state.showPopup ? 
          <Popup text='Close Me' closePopup={this.togglePopup.bind(this)} />
          : null
        }
      </div>
    );
  }
};

ReactDOM.render(
  <App />,
  document.getElementById('content')
);

必要なさそうなところは割愛させていただきました。
上記のコードを追加して実行すると、画面に「show popup」というボタンが表示されるはずです。
で、そのボタンをクリックすると、ポップアップが表示されます。
ポップアップを閉じるときは、「close me」ボタンをクリックします。

簡単に解説すると、ポップアップの表示・非表示は、showPopup という state で制御しており、この値が true だとポップアップを表示し、false だとポップアップが非表示になります。
で、「show popup」がクリックされると、showPopup が true に、「close me」クリックで showPopup が false になります。
ちなみに、「close me」ボタンが押されたときの処理は、App クラス内の togglePopup 関数で定義していますので、処理の内容を変更したい場合はこちらを確認してください。

以上、Reactでポップアップを実装する方法でした。