Wie erstelle ich einen Switch in ReactJS?

ReactJS ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, die eine effiziente Möglichkeit zur Entwicklung interaktiver Komponenten bietet. Kippschalter werden häufig verwendet, um Benutzern das Wechseln zwischen Dunkelmodus- und Hellmodus-Themen in Webanwendungen zu ermöglichen. Mit Umschaltern können auch bestimmte Inhalte oder Teile einer Seite ein- oder ausgeblendet werden. In diesem Artikel erfahren Sie, wie Sie mit ReactJS einen Umschalter erstellen.

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, wird davon ausgegangen, dass Sie über grundlegende Kenntnisse von ReactJS verfügen und eine Entwicklungsumgebung mit installierten Node.js und npm eingerichtet haben.

Richten Sie die React-Anwendung ein und installieren Sie die erforderlichen Bibliotheken

Erstellen wir zunächst eine neue React-Anwendung mit Create React App. Öffnen Sie eine Eingabeaufforderung und führen Sie den folgenden Befehl aus:

npx create-react-app toggle-slider-switch

Dieser Befehl erstellt ein neues Verzeichnis mit dem Namen „toggle-slider-switch“ und richtet darin eine grundlegende React-Anwendung ein. Um zum Projektverzeichnis zu navigieren, schreiben Sie den folgenden Befehl.

cd toggle-slider-switch

Schritt 2: ToggleSlider-Komponente erstellen

Erstellen Sie im src-Verzeichnis des Projekts eine neue Datei mit dem Namen ToggleSlider.js. Diese Datei enthält den Code unserer Toggle-Slider-Komponente. Öffnen Sie die Datei ToggleSlider.js in Ihrem bevorzugten Texteditor und fügen Sie den folgenden Code hinzu:

Beispiel

Im folgenden Code haben wir den useState-Hook von React importiert, der es uns ermöglicht, den Status in Funktionskomponenten zu verwalten. Wir definieren eine ToggleSlider-Komponente, die den Zustand des Schalters mithilfe einer überprüften Variablen verwaltet. Die handleToggle-Funktion ist für die Aktualisierung des Status verantwortlich, wenn auf den Schalter geklickt wird.

import React, { useState } from 'react';
import './ToggleSlider.css';

const ToggleSlider = () => {
  const [checked, setChecked] = useState(false);

  const handleToggle = () => {
    setChecked(!checked);
  };

  return (
    <div className="toggle-slider">
      <input
        type="checkbox"
        id="toggle"
        checked={checked}
        onChange={handleToggle}
      />
      <label htmlFor="toggle" className="slider" />
    </div>
  );
};

export default ToggleSlider;

Schritt 3: Gestalten Sie den Schieberegler

Erstellen Sie eine neue Datei mit dem Namen ToggleSlider.css im selben Verzeichnis (src). Fügen Sie den folgenden CSS-Code hinzu, um den Umschaltschieberegler zu formatieren:

Beispiel

Im folgenden Code formatiert der CSS-Code den Umschaltschieberegler, einschließlich des Schalters und seines Schiebereglergriffs. input[type='checkbox'] ist ausgeblendet und wir verwenden die Beschriftung, um den Umschalteffekt auszulösen.

.toggle-slider {
  position: relative;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']:checked + .slider {
  background-color: #2196f3;
}

input[type='checkbox']:checked + .slider:before {
  transform: translateX(26px);
}

Schritt 4: Implementieren Sie die ToggleSlider-Komponente

Als nächstes ändern wir die Datei App.js im Verzeichnis src, um unsere ToggleSlider-Komponente einzuschließen. Öffnen Sie die App.js-Datei und aktualisieren Sie ihren Inhalt mit dem folgenden Code

Beispiel

Im folgenden Code importieren wir die ToggleSlider-Komponente und rendern sie in der App-Komponente. Dadurch wird unser Umschaltschieberegler auf dem Bildschirm angezeigt.

import React from 'react';
import ToggleSlider from './ToggleSlider';

const App = () => {
  return (
    <div className="app">
      <h1>Toggle Slider Example
      <ToggleSlider />
    </div>
  );
};

export default App;

Schritt 5: Führen Sie die React-App aus

Jetzt können wir unsere Kippschalteranwendung ausführen. Stellen Sie in der Eingabeaufforderung sicher, dass Sie sich im Stammverzeichnis Ihres Projekts befinden (schalten Sie den Schiebeschalter um). Führen Sie den folgenden Befehl aus, um den React-Entwicklungsserver zu starten:

Sobald der Kompilierungsvorgang abgeschlossen ist, wird Ihr Standardbrowser geöffnet und Sie sollten den Titel „Beispiel für einen Toggle-Slider“ zusammen mit dem Toggle-Slider auf dem Bildschirm sehen.

npm start

Schritt 6: Testen Sie den Umschaltschieber

Durch Klicken auf den Schieberegler wird der Status umgeschaltet und das Erscheinungsbild geändert. Der Anfangszustand in der ToggleSlider-Komponente ist auf „false“ gesetzt. Wenn Sie also auf den Schieberegler klicken, wird er blau und zeigt damit den Zustand „true“ an. Klicken Sie erneut, um zum Ausgangszustand zurückzukehren.

Ausgabe

Fazit

In diesem Artikel haben wir besprochen, wie man einen Schalter in Reactjs erstellt. Wir haben den Schritt-für-Schritt-Prozess zum Einrichten einer React-Anwendung, zum Erstellen einer Toggle-Slider-Komponente, zum Gestalten des Sliders, zum Implementieren der Komponente und zum Ausführen der Anwendung behandelt. Wenn Sie dieser Anleitung folgen, sollten Sie nun über einen Funktions-Kippschalter in Ihrer ReactJS-Anwendung verfügen, der für weitere Anpassungen und Integration in Ihr Projekt bereit ist.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Switch in ReactJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!