Sayı ve buton
- React kursu
- Başlangıç
- Ders 46/84
- 5 dk
Sayıyı gösteren ve artıran butonu eklersin.
Azaltma ve sıfırlama
Sayacı azaltmak için setCount(count - 1), sıfırlamak için setCount(0) çağırırsın. Her biri ayrı bir handler ve düğme alır.
İki düğmeyi yan yana koyarsın: birinde "−1", diğerinde "Sıfırla". Her düğme kendi handler'ını çağırır.
Bu yapı, birden çok etkileşimi tek bileşende yönetmenin örneğidir.
İki düğme yan yana
Azaltma ve sıfırlama düğmelerini aynı return içinde, yan yana JSX olarak döndürürsün. React tek bir kök ister; iki kardeşi bir <div> veya <> fragment içine alırsın.
Fragment <>...</> ekstra DOM düğümü eklemeden gruplar; ileride ayrıntılı göreceğiz.
Her düğme kendi onClick'ini alır; handler'lar bileşende tanımlıdır.
Uygulama Azaltma ve sıfırlama
Aşağıdaki iskeleti tamamla. Counter bileşeni yaz; useState'i içe aktar. const [count, setCount] = useState(0); tanımla. handleDown içinde setCount(count - 1), handleReset içinde setCount(0) çağır. <> içinde iki düğme döndür: <button onClick={handleDown}>-</button> ve <button onClick={handleReset}>Sıfırla</button>. Dışa aktar.
Başlangıç kodu
import { useState } from "react";
// Counter bileşenini buraya tanımlaÖrnek çözüm
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function handleDown() { setCount(count - 1); }
function handleReset() { setCount(0); }
return <><button onClick={handleDown}>-</button><button onClick={handleReset}>Sıfırla</button></>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sıfırlama için doğru çağrı hangisidir?
The updater can be called with a constant.- setCount(0) Doğru cevap
- setCount(count)
- count = 0
- reset()
Açıklama: setCount(0) sayıyı başa alır.
2 Sayı ve buton: eksik parçayı tamamla
function handleDown() { setCount(____); }function handleDown() { setCount(count - 1); }Açıklama: Azaltma count - 1 ile yapılır.
3 Sayı ve buton: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
handleDown |
Azaltma |
handleReset |
Sıfırlama |
setCount(0) |
Sıfır |
<>...</> |
Fragment |