Reactでモーダルコンポーネントを実装する方法
序章
モーダルは、ほとんどの場合ダイアログボックスとして、アプリケーション内の個別のウィンドウです。 これらは、情報を提供したり、確認を要求したりするための一般的なユーザーインターフェイスパターンです。
このチュートリアルでは、Reactプロジェクトにモーダルコンポーネントを実装する方法について学習します。 状態を管理するためのDashboard
コンポーネントと、モーダルにアクセスするためのボタンを作成します。 また、Modal
コンポーネントを開発して、モーダルと閉じるボタンを作成します。 ボタンをクリックすると、プロジェクトがモーダルを表示して閉じます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- このチュートリアルを開始する前に、Reactの基本を理解してください。 React.js シリーズのコーディング方法に従って、Reactの詳細を学ぶことができます。
ステップ1—Dashboard
コンポーネントを開始する
ダッシュボードは、モーダルを表示する場所です。 ダッシュボードを開始するには、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()
は、.setState()
メソッドを使用して状態を更新し、ユーザーがモーダルを開いたときにshow
プロパティの値をtrue
に変更します。 同様に、hideModal()
関数の.setState()
メソッドはモーダルを閉じ、show
プロパティの値をfalse
に変更します。
注: .bind()
メソッドを使用して、constructor()
に関数をバインドすることを忘れないでください。
状態と関数を適用すると、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
は、ReactJSX属性onClick
を受け入れて、.showModal()
関数を適用し、モーダルを開きます。 Dashboard
コンポーネントを、ルートHTMLファイルに接続された上位のApp
コンポーネントにエクスポートします。
ステップ2—Modal
コンポーネントを構築する
新しいファイルModal.js
を作成し、ステートレス機能Modal
コンポーネントを、handleClose
、show
、およびchildren
の3つの引数で宣言します。 引数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()
ステートメントは、props.children
として表される引数children
を渡します。これは、モーダルを開閉する機能への参照です。 モーダルには、hideModal()
メソッドを受け入れるReactJSX onClick
属性を持つボタンも含まれています。ここでは、引数handleClose
として表され、小道具として
変数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
ファイルに移動し、Modal
コンポーネントをReactインスタンテーションの下にインポートします。
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デモをご覧ください。