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 檢查哪個選項卡處于活動狀態？的詳細內容，更多請關注www.92cms.cn其它相關文章！
