Verwalten von Boolean-Status mit useState

Snippet

Verwalten von Boolean-Status mit useState

Der useState-Hook ermöglicht es dir, Status zu funktionalen Komponenten hinzuzufügen. In diesem Beispiel verwenden wir einen Boolean-Wert, um zu verfolgen, ob eine Schaltfläche 'ein' oder 'aus' ist.

snippet.js
javascript
import React, { useState } from 'react';
 
function ToggleButton() {
  const [isOn, setIsOn] = useState(false);
 
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

react

Erklärung

const [isOn, setIsOn] = useState(false);

Initialisiert eine Statusvariable 'isOn' mit 'false' und eine Funktion 'setIsOn', um diese zu aktualisieren.

onClick={() => setIsOn(!isOn)}

Ein Event-Handler, der den aktuellen Boolean-Wert mithilfe des logischen NOT-Operators (!) umkehrt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Verwandt

Aus deiner Bibliothek