Statuswert in Reaktion umschalten

Seit den Anfängen des Internets haben Frontend-Entwickler JavaScript verwendet, um ihren Webseiten dynamische und interaktive Funktionen hinzuzufügen. Heutzutage ist der Prozess der Erstellung von Webanwendungen ganz anders als noch vor 20 Jahren.

Entwickler müssen immer noch Web-Apps mit dynamischen, interaktiven Funktionen erstellen. Sie neigen dazu, JavaScript-basierte Frameworks zu verwenden.

React ist besonders beliebt zum Erstellen moderner Benutzeroberflächen. Es behält einen internen Zustand bei, der es Ihnen ermöglicht, Ihren Apps dynamische Funktionen hinzuzufügen.

Dieser Artikel zeigt dir, wie du die Zustandsvariable in React umschaltest.

Statuswert in Reaktion umschalten

In React hat jede Komponente einen Zustand. Entwickler verwenden häufig den Zustand, um Eingaben von Benutzern zu erfassen.

Heutzutage ist es beispielsweise üblich, den Benutzern die Möglichkeit zu geben, die Hellmodus- oder Dunkelmodusversionen der Website zu verwenden.

Um diese Funktion in React zu implementieren, müssten wir eine Zustandsvariable nightMode (oder einen anderen beschreibenden Variablennamen) entweder auf true oder false setzen. Dann könnten wir bedingtes Styling verwenden, um die Hintergrund- und Textfarben abhängig vom aktuellen Wert dieser Variablen zu ändern.

Schauen wir uns ein Beispiel an:

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

In diesem Fall haben wir eine nightMode-Variable standardmäßig auf false gesetzt. Wir möchten den Benutzern jedoch die Wahl geben, den Dunkelmodus zu verwenden, und wenn Benutzer den Dunkelmodus nicht mögen, möchten wir ihnen die Möglichkeit geben, zum Normalmodus zurückzukehren.

Dafür müssen wir den Umschaltstatus React verwenden. Gehen Sie zur Live-CodeSandbox-Demo, um den Beispielcode in Aktion zu testen.

Erfassen Sie Änderungen in den Eingabeelementen

Im obigen Beispiel haben wir das einfachste Beispiel: Durch Klicken auf eine Schaltfläche wird der aktuelle Wert der Zustandsvariablen nightMode umgeschaltet. Alternativ können Sie das Kontrollkästchen oder ein anderes Element verwenden, um die Zustandsvariable in React umzuschalten.

Abhängig von Ihrem HTML-Element müssen Sie Ihren Event-Handler für das richtige Event auslösen. Für Schaltflächen verwenden wir das Attribut onClick, um Änderungen als Reaktion auf die Klicks der Benutzer vorzunehmen.

Wenn Sie das Kontrollkästchen verwenden, möchten Sie möglicherweise stattdessen das Attribut onChange verwenden.

Aktualisieren Sie den Status für Klassenkomponenten

Im obigen Beispiel haben wir den useState()-Hook verwendet, um die Zustandsvariable in React zu aktualisieren. Dieser Hook ist nur verfügbar, wenn Sie eine React-Version 16.8 oder eine neuere Version ausführen.

Einige Entwickler ziehen es vor, Klassenkomponenten zu schreiben, selbst wenn Hooks verfügbar sind.

React-Entwicklern ist es untersagt, das Zustandsobjekt direkt zu mutieren. Wir müssen die Methode setState() verwenden, um den Status in Klassenkomponenten zu aktualisieren.

Das Argument muss das gesamte Zustandsobjekt sein, auch wenn Sie nur den Wert einer bestimmten Eigenschaft umschalten möchten. Ändern Sie den Wert einer bestimmten Eigenschaft, aber übergeben Sie trotzdem das gesamte Objekt.

Schauen wir uns ein Beispiel an:

class App extends React.Component {
  constructor() {
  super();
  this.state = {nightMode: false};
  }
  render() {
    const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
    return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setState({nightMode: !this.state.nightMode})}>
        Toggle state variable
      </button>
    </div>
  );
  }
}

Das Initialisieren des Zustands in Klassenkomponenten erfordert mehr Codezeilen als funktionale Komponenten-Hooks. Wie Sie sehen können, haben wir den constructor() verwendet, um das anfängliche state-Objekt zu erstellen.

Wir haben die Methode setState() in JSX verwendet, um den Wert der Eigenschaft nightMode zu aktualisieren. Wir haben das neue state-Objekt als erstes Argument an die setState()-Methode übergeben.

Um den Status in React umzuschalten, setzen wir den neuen Wert der Eigenschaft nightMode auf das Gegenteil des aktuellen Werts.

Aktualisieren Sie den Status für funktionale Komponenten

Schauen wir uns noch einmal den Beispielcode an:

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

Der useState()-Hook gibt zwei Werte zurück: den Zustandswert (den wir in der nightMode-Variable gespeichert haben) und die Funktion zum Aktualisieren dieser spezifischen Variablen (die in der setNightMode-Variable gespeichert ist).

Es ist eine Konvention, Ihre Variablen auf diese Weise zu benennen – ein beschreibender Name für die Zustandsvariable und dann set+variableName für die Funktion, die sie aktualisiert.

Die Handler-Funktion für das Click-Event ist einfach. Wir haben den entgegengesetzten Operator ! und führte die Funktion setNightMode() aus, um den Zustandsvariablenwert auf das Gegenteil von dem zu setzen, was er jetzt ist.