Sınır kontrolü
- React kursu
- Başlangıç
- Ders 48/84
- 5 dk
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.
Başlangıç kodu
import { useState } from "react";
// ClampCounter bileşenini buraya tanımlaÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 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 Doğru cevap
Açıklama: Math.min büyük değeri 10'da keser.
2 Sınır kontrolü: eksik parçayı tamamla
function handleUp() { if (count < 10) ____(count + 1); }function handleUp() { if (count < 10) setCount(count + 1); }Açıklama: Sınır içindeyse güncellersin.
3 Sınır kontrolü: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Math.min |
Üst sınır |
Math.max |
Alt sınır |
if (count < 10) |
Koşul |
setCount |
Güncelleme |