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

序章

モーダルは、ほとんどの場合ダイアログボックスとして、アプリケーション内の個別のウィンドウです。 これらは、情報を提供したり、確認を要求したりするための一般的なユーザーインターフェイスパターンです。

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

前提条件

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

• このチュートリアルを開始する前に、Reactの基本を理解してください。 React.js シリーズのコーディング方法に従って、Reactの詳細を学ぶことができます。

ステップ1—Dashboardコンポーネントを開始する

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

Dashboard.js

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()は、.setState()メソッドを使用して状態を更新し、ユーザーがモーダルを開いたときにshowプロパティの値をtrueに変更します。 同様に、hideModal()関数の.setState()メソッドはモーダルを閉じ、showプロパティの値をfalseに変更します。

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

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

Dashboard.js

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は、ReactJSX属性onClickを受け入れて、.showModal()関数を適用し、モーダルを開きます。 Dashboardコンポーネントを、ルートHTMLファイルに接続された上位のAppコンポーネントにエクスポートします。

ステップ2—Modalコンポーネントを構築する

新しいファイルModal.jsを作成し、ステートレス機能Modalコンポーネントを、handleClose、show、およびchildrenの3つの引数で宣言します。 引数showは、状態のshowプロパティを表します。

Modal.js

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()ステートメントは、props.childrenとして表される引数childrenを渡します。これは、モーダルを開閉する機能への参照です。 モーダルには、hideModal()メソッドを受け入れるReactJSXonClick属性を持つボタンも含まれています。ここでは、引数handleCloseとして表され、小道具として[に渡されます。 X183X]コンポーネント。

変数showHideClassNameは、その値に条件を割り当てて、状態のshowプロパティの値がtrueであるかどうかを確認します。 その場合、モーダルが表示されます。 それ以外の場合、モーダルは非表示になります。 モーダルを表示および非表示にするプロパティdisplay-blockおよびdisplay-noneは、Modalコンポーネントにインポートされたmodal.cssファイルを介して処理されます。

新しいファイルmodal.cssを開始し、Modalのサイズ、色、および形状のスタイルを設定するルールを設定します。

modal.css

.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ファイルに移動し、ModalコンポーネントをReactインサンティエーションの下にインポートします。

Dashboard.js

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は、Modalコンポーネントからの小道具であり、状態のロジックとhideModal()関数を管理します。

DashboardおよびModalコンポーネントがブラウザに表示されます。

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

結論

このチュートリアルでは、Reactを使用して、あるコンポーネントから別のコンポーネントに小道具と機能を渡すことにより、モーダルを実装する方法を学びました。

このプロジェクトをライブで表示するには、このプロジェクトのCodePenデモをご覧ください。