JavaScript 如何使用Material UI检查哪个标签是活动的

Material-UI提供了各种组件，帮助我们建立具有一致外观和感觉的用户界面。Material-UI提供的组件之一是Tabs组件，它允许我们在我们的应用程序中创建标签式界面。在本教程中，我们将学习如何使用Material-UI，一个流行的React UI库来检查哪个标签是活动的。

使用useState钩子来检查哪个标签是活动的

用户可以按照下面的步骤，使用Material UI检查哪个标签是活动的。

第1步 - 首先，用户需要安装Material-UI。我们可以通过运行以下命令来做到这一点 –

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

第2步 --导入Tabs和Tab组件。We can do this by adding the following lines of code at the top of our component file −

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检查哪个标签处于活动状态的方法是使用标签组件的选定道具。选定的道具允许我们定义一个标签是否应该被选中。

在这种情况下，我们可以通过检查状态变量activeTab来检查哪个标签是活动的；我们将选定的道具传递给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;