Sınır kontrolü

Sayının sıfırın altına inmesini engellersin.

Sınır kontrolü

Sayaç bazen bir aralıkta kalmalıdır: 0–10 gibi. Bunun için handler içinde koşul kullanırsın: if (count < 10) setCount(count + 1).

Veya güncelleyici fonksiyon formuyla: setCount(c => Math.min(c + 1, 10)). Bu, sınırı asla aşmamasını sağlar.

Bu, mantık + state birleşimidir; ileride useReducer ile daha düzenli göreceğiz.

Koşullu güncelleme

Handler içinde if ile sınır kontrolü yaparsın. Koşul sağlanmazsa güncelleyici çağrılmaz; state değişmez, yeniden çizim olmaz.

Bu, "yanlış tıklamayı yok sayma" mantığıdır. Kullanıcı düğmeyi tıklasa bile sınır dışına çıkamaz.

Bu yapı, oyun skorları, stok adedi ve benzeri sınırlı değerler için idealdir.

Uygulama Sınırlı sayaç

Aşağıdaki iskeleti tamamla. ClampCounter bileşeni yaz; useState'i içe aktar. const [count, setCount] = useState(0); tanımla. handleUp içinde setCount(c => Math.min(c + 1, 10)) çağır. <button onClick={handleUp}>{count}</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useState } from "react";

function ClampCounter() {
  const [count, setCount] = useState(0);
  function handleUp() { setCount(c => Math.min(c + 1, 10)); }
  return <button onClick={handleUp}>{count}</button>;
}

export default ClampCounter;

Kendini test et

Sınır 10 ise Math.min(c+1, 10) ne yapar?
```
Math.min picks the smaller value.
```
- 11 verir
- Hata fırlatır
- count'u sıfırlar
- Her zaman 10'u aşmaz
Cevabı göster

Her zaman 10'u aşmaz — Math.min büyük değeri 10'da keser.

Sınır kontrolü: eksik parçayı tamamla

function handleUp() { if (count < 10) ____(count + 1); }

Cevabı göster

function handleUp() { if (count < 10) setCount(count + 1); }

Sınır kontrolü: kavramları eşleştir

Math.min

Üst sınır
Math.max

Alt sınır
if (count < 10)

Koşul
setCount

Güncelleme

Sıradaki ders: Kontrollü input

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler