Setzen Sie den Kontrollkästchenwert in React

1. Checkbox mit wertgesteuerter Eingabe in React
2. Legen Sie den Kontrollkästchenwert in React fest

Jede Webanwendung benötigt Eingabeelemente, in denen Benutzer Text eingeben, eine Auswahl treffen oder ein Kontrollkästchen aktivieren können. In diesem Artikel werden wir diskutieren, wie Eingabeelemente behandelt werden, insbesondere die Kontrollkästchen in React.

Checkbox mit wertgesteuerter Eingabe in React

Bevor wir auf die Implementierung einer kontrollierten Checkbox mit einem checked-Wert in React eingehen, lassen Sie uns über kontrollierte Eingaben sprechen.

In React gibt es kontrollierte und unkontrollierte Komponenten. Eingaben können einer dieser beiden Typen sein.

Eine Komponente (oder ein Eingabeelement) wird gesteuert, wenn sie ihren Wert aus dem Zustand erhält, und die Aktionen des Benutzers aktualisieren den Zustand.

Folgendes passiert, wenn Benutzer den Wert im Eingabefeld ändern:

1. Stellen Sie den Wert des Felds aus dem Wert state ein.
2. Die Eingabe neuer Zeichen in das Feld löst ein onChange-Ereignis aus.
3. Sie legen fest, dass der Handler den Status aktualisiert, um die Änderungen widerzuspiegeln.
4. Neuer Zustandswert wird im Eingabefeld angezeigt.

Mit anderen Worten, es gibt eine bidirektionale Bindung zwischen dem Eingabeelement und dem Zustand. Änderungen im Eingabeelement aktualisieren den Zustand, und das Element erhält seinen Wert aus dem Zustand.

Legen Sie den Kontrollkästchenwert in React fest

Typischerweise können Sie das Attribut value eines Eingabeelements festlegen, um sicherzustellen, dass es seinen Wert aus dem Status erhält. Bei Checkboxen verwenden wir das Attribut checked.

Sie können das Attribut checked gleich dem booleschen Wert setzen. Daher muss der Statuswert true oder false sein und darf kein String, Integer oder irgendein anderer Typ sein.

Schauen wir uns dieses Beispiel an:

export default function App() {
  const [condition, setCondition] = useState(true);
  return (
    <div className="App">
      Interested?
      <input
        type="checkbox"
        checked={condition}
        onChange={() => setCondition(!condition)}
      />
    </div>
  );
}

Sehen Sie sich die Live-Demo auf CodeSandbox an.

In diesem Beispiel setzen wir das Attribut checked der Checkbox auf die Zustandsvariable condition. Wir haben den Wert dieser Zustandsvariablen mit dem Hook useState() initialisiert.

Beim Initialisieren einer Zustandsvariablen ist das Argument, das für useState() bereitgestellt wird, der Anfangswert der Zustandsvariablen. In diesem Fall wird die Variable condition als true initialisiert.

Aktualisieren Sie als Nächstes den Status, um die letzte Eingabe des Benutzers widerzuspiegeln. Dazu setzen wir das Attribut onChange, um die Zustandsvariable jedes Mal zu aktualisieren, wenn es eine Änderung an der Komponente gibt.

In diesem Fall setzen wir die Zustandsvariable Bedingung auf das Gegenteil ihres aktuellen Werts. Wenn es aktuell true ist, wird es durch Ändern der Checkbox (Häkchen entfernen) auf false gesetzt, und wenn es aktuell false (nicht angekreuzt) ist, wird es auf true gesetzt.