ウェブサイト検索

Reactでモーダルコンポーネントを実装する方法

紹介

モーダルはアプリケーション内の別のウィンドウであり、最も一般的にはダイアログボックスとして表示されます。情報を提供したり、確認を求めたりするための一般的なユーザーインターフェースパターンです。

このチュートリアルでは、Reactプロジェクトでモーダルコンポーネントを実装する方法について学びます。状態を管理するためのDashboardコンポーネントと、モーダルにアクセスするためのボタンを作成します。また、モーダルを構築するためのModalコンポーネントと、閉じるためのボタンも開発します。あなたのプロジェクトは、ボタンをクリックすることでモーダルを表示し、閉じることができます。

前提条件

このチュートリアルを完了するためには、次のものが必要です:

  • このチュートリアルを始める前に、Reactについての基本的な理解が必要です。React.jsのコーディング方法シリーズをフォローすることで、Reactについてもっと学ぶことができます。

ステップ1 — ダッシュボードコンポーネントの開始

ダッシュボードはモーダルを表示する場所です。ダッシュボードを始めるには、ReactのインスタンスとComponentオブジェクトをDashboard.jsファイルにインポートします。Dashboardコンポーネントを宣言し、状態を設定します。

import React, { Component } from "react";

class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };
}

export default Dashboard

あなたの状態には、値が false のプロパティ show が含まれています。これにより、ユーザーがモーダルを開くように促すまで、モーダルを隠すことができます。関数 showModal() は、ユーザーがモーダルを開いたときに、show プロパティの値を true に変更するために、.setState() メソッドで状態を更新します。同様に、hideModal() 関数内の .setState() メソッドは、モーダルを閉じて show プロパティの値を false に変更します。

注意： 関数を constructor() で .bind() メソッドを使用してバインドするのを忘れないでください。

一度状態と関数を適用すると、あなたの render() ライフサイクルメソッドが return() ステートメント内でモーダルを表示することを処理します。

import React, { Component } from "react";

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

buttonは、.showModal()関数を適用し、モーダルを開くためにReact JSX属性onClickを受け入れます。あなたは、Dashboardコンポーネントを、ルートHTMLファイルに接続された高次のAppコンポーネントにエクスポートします。

ステップ2 — Modal コンポーネントの構築

新しいファイル Modal.js を作成し、handleClose、show、および children の3つの引数を持つ無状態の関数コンポーネント Modal を宣言します。引数 show は、状態にある show プロパティを示します。

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

あなたのreturn()ステートメントは、引数children、すなわちprops.childrenを渡し、モーダルの開閉機能を参照しています。また、モーダルには、React JSXのonClick属性を持つボタンが含まれており、ここでは引数handleCloseとして表現されるhideModal()メソッドを受け入れます。これはあなたのDashboardコンポーネントにpropsとして渡されます。

変数 showHideClassName は、その値に条件付きの値を割り当てており、あなたの状態における show プロパティの値が true かどうかをチェックします。もしそうであれば、モーダルが表示されます。そうでなければ、モーダルは隠れます。モーダルを表示・非表示にするプロパティ display-block と display-none は、あなたの Modal コンポーネントにインポートされた modal.css ファイルを通じて処理されます。

新しいファイル、modal.cssを作成し、Modalのサイズ、色、形をスタイルするルールを設定してください。

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

これにより、白いボックスのアウトラインと陰色の背景を持つ中央揃えのモーダルが生成されます。あなたのModalコンポーネントが完成したので、Dashboardにそのコンポーネントを統合しましょう。

ステップ3 — Modal コンポーネントの組み込み

あなたのModalをDashboardに組み合わせるには、Dashboard.jsファイルに移動し、Reactの作成の下にModalコンポーネントをインポートします:

import React, { Component } from "react";
import Modal from './Modal.js';

class Dashboard extends Component {
  // ...
  render() {
    return (
      <main>
        <h1>React Modal</h1>
        <Modal show={this.state.show} handleClose={this.hideModal}>
          <p>Modal</p>
        </Modal>
        <button type="button" onClick={this.showModal}>
          Open
        </button>
      </main>
    );
  }
}

export default Dashboard

あなたの return() ステートメントには、モーダルを表示および非表示にするために Modal コンポーネントを含めてください。属性 show と handleClose は、状態の処理と hideModal() 関数のロジックを管理するための Modal コンポーネントからのプロップです。

あなたのダッシュボードとモーダルコンポーネントは、これからブラウザでレンダリングされます:

新しいModalコンポーネントがどのように開閉するかを観察してください。

結論

このチュートリアルでは、Reactを使ってどのようにモーダルを実装できるか、1つのコンポーネントから別のコンポーネントへプロパティや機能を渡すことによって学びました。

このプロジェクトをライブで表示するには、こちらにこのプロジェクトのCodePenデモがあります。

関連記事: