Website-Suche

javascript - Wie kann man den booleschen Zustand einer React-Komponente umschalten?

Ich möchte wissen, wie man den booleschen Zustand einer React-Komponente umschaltet. Zum Beispiel:

Ich habe eine boolesche Zustandsprüfung im Konstruktor meiner Komponente:

constructor(props, context) { 
   super(props, context);

   this.state = {
      check: false
   };
};

Ich versuche, den Zustand jedes Mal umzuschalten, wenn mein Kontrollkästchen angeklickt wird, indem ich die this.setState-Methode verwende:

<label>
  <input
    type=checkbox"
    value="check"
    onChange={(e) => this.setState({check: !check.value})}
  />
  Checkbox
</label>

Natürlich bekomme ich einen Uncaught ReferenceError: check is not defined. Wie kann ich das also erreichen?

Antwort #1

Wenn Ihr neues Zustandsupdate vom vorherigen Zustand abhängt, verwenden Sie immer die funktionale Form von setState, die als Argument eine Funktion akzeptiert, die einen neuen Zustand zurückgibt.

In Ihrem Fall:

this.setState(prevState => ({
  check: !prevState.check
}));

Siehe Dokumentation

Da diese Antwort immer beliebter wird, füge ich den Ansatz hinzu, der für React Hooks (v16.8+) verwendet werden sollte:

Wenn Sie den useState-Hook verwenden, dann verwenden Sie den folgenden Code (für den Fall, dass Ihr neuer Zustand vom vorherigen Zustand abhängt):

const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);

Update [Mai 2023]:

Relevanter Abschnitt in den Dokumenten: https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state

Antwort #2

Du solltest hier this.state.check anstelle von check.value verwenden:

this.setState({check: !this.state.check})

Aber sowieso ist es schlechte Praxis, es auf diese Weise zu tun. Viel besser ist es, es in eine separate Methode zu verschieben und keine Callbacks direkt im Markup zu schreiben.

Aktualisierung: Wie in den Kommentaren erwähnt, könnte dieser Ansatz zu unerwarteten Ergebnissen führen, da der Zustand von React asynchron ist. Der richtige Weg in diesem Fall ist die Verwendung eines Callbacks:

this.setState(({ check }) => ({ check: !check }));

Antwort #3

Hier ist ein Beispiel unter Verwendung von Hooks (erfordert React >= 16.8.0)

// import React, { useState } from 'react';
const { useState } = React;

function App() {
  const [checked, setChecked] = useState(false);
  const toggleChecked = () => setChecked(value => !value);
  return (
    <input
      type="checkbox"
      checked={checked}
      onChange={toggleChecked}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"><div>

Verwandte Artikel