Boolescher Wert im State in React
Lassen Sie uns einen State inCart erstellen, der
anzeigt, ob sich das Produkt im Warenkorb befindet oder nicht:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
</div>;
}
Der Wert false bedeute, dass das Produkt
sich nicht im Warenkorb befindet, und der Wert true, dass es
im Warenkorb ist. Geben wir diese Information mit Hilfe des
ternären Operators aus:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'im Warenkorb' : 'nicht im Warenkorb'}</span>
</div>;
}
Erstellen wir nun einen Button, der bei Klick das Produkt zum Warenkorb hinzufügt:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'im Warenkorb' : 'nicht im Warenkorb'}</span>
<button onClick={() => setInCart(true)}>btn</button>
</div>;
}
Modifizieren wir unseren Code so, dass der erste Klick auf den Button zum Warenkorb hinzufügt und der zweite - aus ihm entfernt:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'im Warenkorb' : 'nicht im Warenkorb'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Erstellen Sie einen Button, dessen Klick den Benutzer bannt, und einen Button, dessen Klick den Benutzer entbannt.
Modifizieren Sie die vorherige Aufgabe so, dass von den zwei Buttons immer nur der entsprechende sichtbar ist. Das heißt, wenn der Benutzer gebannt ist, ist der Button zum Entbannen sichtbar, und wenn nicht gebannt - der zum Bannen.
