如何使用 Material UI 檢查哪個標籤處於活動狀態？

---

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

使用 useState hook 檢查哪個標籤處於活動狀態

使用者可以按照以下步驟使用 Material UI 檢查哪個標籤處於活動狀態。

步驟 1 − 首先，使用者需要安裝 Material-UI。我們可以執行以下命令：

npm install @mui/material @emotion/react @emotion/styled

步驟 2 − 匯入 Tabs 和 Tab 元件。我們可以在元件檔案的頂部新增以下程式碼行：

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

步驟 3 − 建立一個狀態來跟蹤活動標籤。我們可以使用 React 的 useState hook 來實現。以下是如何建立一個名為 value 的狀態變數的示例：

const [value, setValue] = React.useState(0);

步驟 4 − 我們需要使用 Tabs 和 Tab 元件。以下是如何使用這些元件的示例：

<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 檢查哪個標籤處於活動狀態的另一種方法是使用 Tab 元件的 selected 屬性。selected 屬性允許我們定義是否應選擇一個標籤。

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

以下是如何使用 selected 屬性檢查哪個標籤處於活動狀態的示例：

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、匯入 Tabs 和 Tab 元件、建立狀態變數來跟蹤活動標籤以及如何在 JSX 程式碼中使用這些元件。