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

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;

輸出

範例 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、匯入選項卡和選項卡元件、建立狀態變數來追蹤活動選項卡，以及如何在我們的 JSX 程式碼中使用這些元件。

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