マテリアル UI を使用してどのタブがアクティブであるかを確認するにはどうすればよいですか?

マテリアル UI は、一貫したルック アンド フィールのユーザー インターフェイスを構築するのに役立つさまざまなコンポーネントを提供します。 Material-UI によって提供されるコンポーネントの 1 つは Tabs コンポーネントです。これを使用すると、アプリケーションでタブ付きインターフェイスを作成できます。このチュートリアルでは、人気のある React UI ライブラリの Materials-UI を使用して、どのタブがアクティブであるかを確認する方法を学びます。

useState フックを使用してどのタブがアクティブであるかを確認します

ユーザーは、以下の手順に従って、マテリアル UI を使用してどのタブがアクティブであるかを確認できます。

ステップ 1 - まず、ユーザーはマテリアル UI をインストールする必要があります。これを行うには、次のコマンドを実行します。 -

リーリー

ステップ 2 - タブとタブ コンポーネントをインポートします。これを行うには、コンポーネント ファイル -

の先頭に次のコード行を追加します。 リーリー

ステップ 3 - アクティブなタブを追跡するための状態を作成します。これは、React の useState フックを使用して行うことができます。 value -

という名前の状態変数を作成する方法の例を次に示します。 リーリー

ステップ 4 - タブとタブ コンポーネントを使用する必要があります。これらのコンポーネントの使用方法の例を次に示します -

リーリー

例 1

この例では、アクティブなタブを追跡する状態を作成します。activeTab という状態変数を作成し、「tab1」に初期化します。

イベントと newValue をパラメーターとして受け取り、activeTab の状態を更新する関数 handleTabChange を定義します。

activeTab 状態変数の値をチェックすることで、アクティブなタブを確認できます。たとえば、activeTab が「tab1」の場合は最初のタブがアクティブになり、activeTab が「tab2」の場合は 2 番目のタブがアクティブになります。

リーリー ＃＃＃出力＃＃＃

例 2

マテリアル UI を使用してどのタブがアクティブであるかを確認するもう 1 つの方法は、タブ コンポーネントの selected プロパティを使用することです。 selected 属性を使用すると、タブを選択するかどうかを定義できます。

この場合、状態変数 activeTab をチェックすることでどのタブがアクティブであるかを確認できます。選択したプロパティを Tab コンポーネントに渡し、状態変数 activeTab の値を Tab コンポーネントの値と比較します。一致するものがあればタブは選択されますが、一致しない場合は選択されません。

これは、選択したプロパティを使用してどのタブがアクティブであるかを確認する方法の例です -

リーリー ＃＃＃出力＃＃＃

このチュートリアルでは、マテリアル UI を使用してどのタブがアクティブであるかを確認する方法を学びました。

マテリアル UI のインストール方法、タブとタブ コンポーネントのインポート方法、アクティブなタブを追跡するための状態変数の作成方法、および JSX コードでこれらのコンポーネントを使用する方法を説明しました。

以上がマテリアル UI を使用してどのタブがアクティブであるかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。