Meydan okuma: Sayaç ve sıfırlama

Artı, eksi ve sıfırla butonlu, alt sınırı olan bir sayacı yazarsın.

Meydan okuma: Sayaç ve sıfırlama

Bu meydan okuma, Counter bileşenini yazmanı istiyor. Üç buton: Artır, Azalt ve Sıfırla. count state'i 0'dan başlasın.

Artır: setCount(c => c + 1). Azalt: setCount(c => c - 1). Sıfırla: setCount(0).

Sıfırın altına düşmeyi engellemek için bir guard ekle: azalt butonunda setCount(c => Math.max(0, c - 1)). Böylece count hiçbir zaman negatif olmaz.

Uygulama Counter guard ile yaz

Aşağıdaki iskeleti tamamla. Counter bileşeni yaz. count state'i 0'dan başlasın. <p>{ '{ count }' }</p> göster. Üç buton ekle: Artır setCount(c => c + 1), Azalt setCount(c => Math.max(0, c - 1)), Sıfırla setCount(0). Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Artır</button>
      <button onClick={() => setCount((c) => Math.max(0, c - 1))}>Azalt</button>
      <button onClick={() => setCount(0)}>Sıfırla</button>
    </div>
  );
}

export default Counter;

Kendini test et

Sıfırlama

Sayaç sıfırlamak için ____ çağrılır.

Cevabı göster

Sayaç sıfırlamak için setCount(0) çağrılır.

Sayaç butonlarını eşleştir

Artır

c + 1
Azalt

Math.max(0, c-1)
Sıfırla

0
guard

Math.max

Sıradaki ders: Meydan okuma: Açılır menü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler