首頁 > web前端 > js教程 > 主體

如何使用 Material UI 檢查哪個選項卡處於活動狀態?

WBOY
發布: 2023-09-13 19:21:06
轉載
905 人瀏覽過

Material-UI 提供了各種元件,幫助我們建立具有一致外觀和感覺的使用者介面。 Material-UI 提供的元件之一是 Tabs 元件,它允許我們在應用程式中建立選項卡式介面。在本教程中,我們將學習如何使用流行的 React UI 庫 Material-UI 檢查哪個選項卡處於活動狀態。

使用 useState 掛鉤檢查哪個選項卡處於活動狀態

使用者可以依照下列步驟使用 Material UI 檢查哪個選項卡處於活動狀態。

步驟 1 - 首先,使用者需要安裝 Material-UI。我們可以透過執行以下命令來做到這一點 -

npm install @mui/material @emotion/react @emotion/styled
登入後複製

步驟 2 - 匯入選項卡和選項卡元件。我們可以透過在元件檔案頂部添加以下程式碼行來做到這一點 -

import { Tabs, Tab } from '@mui/material'; 
登入後複製

第 3 步 - 建立一個狀態來追蹤活動標籤。我們可以使用 React 中的 useState 鉤子來做到這一點。以下是如何建立名為 value 的狀態變數的範例 -

const [value, setValue] = React.useState(0);
登入後複製

第 4 步 - 我們需要使用選項卡和選項卡元件。這是如何使用這些元件的範例 -

<Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
   <Tab label="Tab 1" />
   <Tab label="Tab 2" />
   <Tab label="Tab 3" />
</Tabs>
登入後複製

範例 1

在此範例中,我們建立了一個狀態來追蹤活動標籤:我們建立一個名為 activeTab 的狀態變量,該變數初始化為「tab1」。

我們定義了一個函數handleTabChange,它將事件和newValue作為參數並更新activeTab狀態。

我們可以透過檢查 activeTab 狀態變數的值來檢查活動標籤。例如,如果 activeTab 為“tab1”,則第一個選項卡處於活動狀態;如果 activeTab 是“tab2”,則第二個選項卡處於活動狀態,依此類推。

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   // Step 1: Create a state to keep track of the active tab
   const [activeTab, setActiveTab] = React.useState('tab1');

   // Step 2: Define a function to handle tab changes
   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };

   // Step 3: Use the Tabs and Tab components
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" />
         <Tab value="tab2" label="Tab 2" />
         <Tab value="tab3" label="Tab 3" />
      </Tabs>
   );
}

export default MyComponent;
登入後複製

輸出

如何使用 Material UI 检查哪个选项卡处于活动状态?

範例 2

使用 Material-UI 檢查哪個選項卡處於活動狀態的另一種方法是使用選項卡元件的 selected 屬性。 selected 屬性可讓我們定義是否應選擇選項卡。

在這種情況下,我們可以透過檢查狀態變數 activeTab 來檢查哪個選項卡處於活動狀態;我們將 selected 屬性傳遞給 Tab 元件,並將狀態變數 activeTab 的值與 Tab 元件的值進行比較。如果匹配,則選擇該選項卡;否則就不會了。

這是如何使用選定的道具來檢查哪個選項卡處於活動狀態的範例 -

import React from 'react';
import { Tabs, Tab } from '@mui/material';

function MyComponent() {
   const [activeTab, setActiveTab] = React.useState('tab1');

   const handleTabChange = (event, newValue) => {
      setActiveTab(newValue);
   };
   return (
      <Tabs value={activeTab} onChange={handleTabChange}>
         <Tab value="tab1" label="Tab 1" selected={activeTab === 'tab1'} />
         <Tab value="tab2" label="Tab 2" selected={activeTab === 'tab2'} />
         <Tab value="tab3" label="Tab 3" selected={activeTab === 'tab3'} />
      </Tabs>
   );
}
export default MyComponent;
登入後複製

輸出

如何使用 Material UI 检查哪个选项卡处于活动状态?

在本教學中,我們學習如何使用 Material-UI 檢查哪個選項卡處於活動狀態。

我們已經了解如何安裝 Material-UI、匯入選項卡和選項卡元件、建立狀態變數來追蹤活動選項卡,以及如何在我們的 JSX 程式碼中使用這些元件。

以上是如何使用 Material UI 檢查哪個選項卡處於活動狀態?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!