Reactのモーダル

May 08 2022
React A Modalでモーダルを構築するためのステップバイステップガイドは、画面の上部に表示されるメッセージボックス/ポップアップです。これらは、アラートから入力まで、さまざまなコンテキストで使用されます。

Reactでモーダルを構築するためのステップバイステップガイド

UnsplashのVincentiuSolomonによる写真

モーダルは、画面の上部に表示されるメッセージボックス/ポップアップです。これらは、アラートから入力まで、さまざまなコンテキストで使用されます。このブログでは、ReactJSでモーダルを実装する方法を学びます。

基本をブラッシュアップしたい場合、またはreactについて学びたい場合は、以下のブログをチェックしてください。

Reactの紹介

Reactアプリを作成する

新しいReactアプリを作成しましょう

Reactアプリの作成

srcに新しいコンポーネントを作成し、それをApp.jsにインポートして、新しいコンポーネントにテキストとボタンを追加します。子供の小道具を利用して、モーダルを再利用できるようにすることができます。これについては次のブログで説明します。

Modal.js
App.js

スタイルの追加

ダイアログ/モーダルとして表示するには、srcフォルダーに新しいCSSファイルを作成してスタイルを追加しましょう。そのCSSファイルを追加した新しいコンポーネントにインポートします。

モーダルコンポーネントのスタイル

見た目が良くなります:)

小道具としての関数の使用:

ブール型のuseState()フックを作成する必要があります。この状態は、モーダルを表示するかどうかを制御します。状態値がtrueの場合、モーダルが表示されます。それ以外の場合は非表示になります。

ユーザーがモーダルコンポーネントの閉じるボタンをクリックすると、状態の値をfalseに変更して、閉じるようにする必要があります。状態は親コンポーネントで定義されているため、子コンポーネントでその状態を直接変更することはできません。親コンポーネントで関数を作成し、それを小道具として子コンポーネントに渡してこれを解決できます。この関数を小道具として子コンポーネントに渡します。

次に、関数を分解して閉じるボタンのon-Clickイベントにアタッチすることで関数を受け入れます。これにより、閉じるをクリックするたびに状態値がfalseに変わり、モーダルが閉じられます。

App.js
Modal.js

やすらぎの時

次に、閉じるをクリックするたびにモーダルを非表示にするロジックを実装しましょう。AND(&&)ロジックを使用して、UIがtrueである場合にのみ、条件付きでUIを表示できます。ANDロジックを使用して、それがtrueである場合にのみモーダルを表示します。

App.js

モーダルを表示する

デフォルトでは、モーダル値はfalseになります。クリックするとモーダルを表示するために、App.jsにボタンを追加する必要があります。App.jsにボタンを追加し、クリックイベントをアタッチして、モーダルを表示するために状態値をtrueに変更する必要があります。

App.js

以下のコードへのリンクを見つけることができます

私の記事を読んでいただきありがとうございます。ご意見をお待ちしております。Mediumでフォローして、最新の記事を更新してください。Linkedinで私とつながることもできます。機械学習、ディープラーニング、Reactに関する私のブログをチェックしてください。

畳み込みニューラルネットワークの概要

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved