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

Material-UI 是最流行的 React UI 库之一。 Material-UI 组件是独立工作的。它们是自支撑的，只会注入它们需要显示的样式。它们不依赖于任何全局样式表，例如 normalize.css。 Material UI 组件的一些示例包括对话框、选项卡、文本字段、菜单、芯片、卡片、步进器、纸张。要在 React 中使用 Material-UI，我们需要在我们的项目中手动安装它。

先决条件：

• React 基础知识
• 任何代码编辑器（sublime 文本编辑器、VS Code 等）

解决方案的路线图

• 创建示例项目
• 将 Material - UI 安装到项目中
• 实现选项卡示例
• 应用最终解决方案

方法：

A）创建一个示例项目：

• 通过在终端中运行以下命令来创建示例 React 项目

  npx create-react-app react-material-ui
  

• 上面的命令将在命令运行的路径中创建一个 React 应用程序样板，并确保您始终使用最新版本的生成器或构建工具，而无需在每次要使用它时进行升级。
• 输入以下命令进入项目文件夹

  cd react-material-ui/
  

• 使用命令运行项目

  npm start
  

• 您应该能够在浏览器中看到以下内容

B) 将 Material — UI 安装到项目中：

• 在终端中使用以下命令安装 Material-UI。您也可以使用 VS Code 的终端。

  npm install @material-ui/core
  

• 现在在项目的src文件夹中查找App.js。如果我们走在正确的道路上，请删除所有不必要的代码并添加一些代码。

  Javascript

  import './App.css';
  import TabsExample from './TabsExample';
    
  function App() {
    return (
      
  
       
  
          Example to Check which Tab is 
          active Using Material-UI
        
      
    );
  }
    
  export default App;

  
  
  
  
  

• 保存更改后，您将观察到浏览器会立即更新。现在一切都准备好编写我们的示例了。

C）实施选项卡示例：

• 是时候使用您的代码编辑器了。在src文件夹中创建一个名为TabsExample.js的文件，并将以下代码粘贴到其中。

  Javascript

  import React from 'react';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
    
  export default class TabsExample extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = {
        value: 'None',
      };
    }
    
    render() {
      return (
        
  
        
                
          
          
          
        
      );
    }
  }
  

• 将您新创建的上述组件导入您的App.js文件。你的App.js 文件应该是这样的

  Javascript

  import './App.css';
  import TabsExample from './TabsExample';
    
  function App() {
    return (
      
  
       
  
         Example to Check which Tab is 
         active Using Material-UI
       
       
      
    );
  }
    
  export default App;
  

• 屏幕将如下所示：

现在是真正的事情的时候了。让我们看看解决方案的方法

D) 应用最终解决方案：

• 这个想法是使用onChange回调，它会在Tab值更改时自动触发

  句法：

  function(event: object, value: any) => void
  

  在哪里，

  event: The event source of the callback
  value: The index of the child (number)

• 现在使用以下代码更新 App.js 文件：

  Javascript

  import React from 'react';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
    
  const styles = {
    headline: {
      fontSize: 24,
      paddingTop: 16,
      marginBottom: 12,
      fontWeight: 400,
      color: 'green',
    },
  };
    
  export default class TabsExample extends React.Component {
    
    constructor(props) {
      super(props);
      this.state = {
        value: 'None',
      };
    }
    handleChange = (_, value) => {
      this.setState({
        value,
      });
    };
    
    render() {
      return (
        
  
        
    
          
          
          
          
  
  
          
  
            Currently Active Tab: {this.state.value}
          
        
      );
    }
  }
  

输出：