Wie kann ich mithilfe der Material-Benutzeroberfläche überprüfen, welche Registerkarte aktiv ist?

Material-UI bietet verschiedene Komponenten, die uns dabei helfen, Benutzeroberflächen mit einem einheitlichen Erscheinungsbild zu erstellen. Eine der von Material-UI bereitgestellten Komponenten ist die Tabs-Komponente, mit der wir in unseren Anwendungen Tab-Oberflächen erstellen können. In diesem Tutorial erfahren Sie, wie Sie mithilfe der beliebten React-UI-Bibliothek Material-UI überprüfen, welche Registerkarte aktiv ist.

Verwenden Sie den Hook „useState“, um zu überprüfen, welche Registerkarte aktiv ist

Benutzer können die folgenden Schritte ausführen, um mithilfe der Material-Benutzeroberfläche zu überprüfen, welche Registerkarte aktiv ist.

Schritt 1 – Zuerst muss der Benutzer Material-UI installieren. Wir können dies tun, indem wir den folgenden Befehl ausführen -

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

Schritt 2 – Tabs und Tab-Komponenten importieren. Wir können dies tun, indem wir die folgende Codezeile oben in der Komponentendatei hinzufügen –

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

Schritt 3 – Erstellen Sie einen Status, um aktive Tabs zu verfolgen. Wir können dies mit dem useState-Hook in React tun. Hier ist ein Beispiel für die Erstellung einer Zustandsvariablen mit dem Namen value -

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

Schritt 4 – Wir müssen Tabs und Tab-Komponenten verwenden. Hier ist ein Beispiel für die Verwendung dieser Komponenten -

<Tabs value={value} onChange={(event, newValue) => setValue(newValue)}>
   <Tab label="Tab 1" />
   <Tab label="Tab 2" />
   <Tab label="Tab 3" />
</Tabs>

Beispiel 1

In diesem Beispiel erstellen wir einen Status, um die aktive Registerkarte zu verfolgen: Wir erstellen eine Statusvariable namens activeTab, die auf „tab1“ initialisiert wird.

Wir definieren eine Funktion handleTabChange, die event und newValue als Parameter verwendet und den activeTab-Status aktualisiert.

Wir können die aktive Registerkarte überprüfen, indem wir den Wert der Statusvariablen „activeTab“ überprüfen. Wenn activeTab beispielsweise „tab1“ ist, ist die erste Registerkarte aktiv; wenn activeTab „tab2“ ist, ist die zweite Registerkarte aktiv und so weiter.

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;

Ausgabe

Beispiel 2

Eine andere Möglichkeit, mithilfe der Material-UI zu überprüfen, welche Registerkarte aktiv ist, besteht darin, die ausgewählte Eigenschaft der Registerkartenkomponente zu verwenden. Mit dem selected-Attribut können wir definieren, ob die Registerkarte ausgewählt werden soll.

In diesem Fall können wir überprüfen, welche Registerkarte aktiv ist, indem wir die Statusvariable activeTab überprüfen. Wir übergeben die ausgewählte Eigenschaft an die Tab-Komponente und vergleichen den Wert der Statusvariablen activeTab mit dem Wert der Tab-Komponente. Wenn eine Übereinstimmung vorliegt, wird die Registerkarte ausgewählt, andernfalls nicht.

Dies ist ein Beispiel dafür, wie Sie mithilfe ausgewählter Requisiten überprüfen können, welcher Tab aktiv ist -

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;

Ausgabe

In diesem Tutorial haben wir gelernt, wie man mithilfe der Material-UI überprüft, welche Registerkarte aktiv ist.

Wir haben gesehen, wie man Material-UI installiert, Tabs und Tab-Komponenten importiert, Statusvariablen erstellt, um aktive Tabs zu verfolgen, und wie man diese Komponenten in unserem JSX-Code verwendet.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe der Material-Benutzeroberfläche überprüfen, welche Registerkarte aktiv ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!