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デモをご覧ください。