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

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

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

Reactアプリを作成する

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

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

スタイルの追加

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

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

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

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

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

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

やすらぎの時

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

モーダルを表示する

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

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

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