Sayı ve buton

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.

Örnek çözümü göster

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;

Kendini test et

Sıfırlama için doğru çağrı hangisidir?
```
The updater can be called with a constant.
```
- setCount(0)
- setCount(count)
- count = 0
- reset()
Cevabı göster

setCount(0) — setCount(0) sayıyı başa alır.

Sayı ve buton: eksik parçayı tamamla

function handleDown() { setCount(____); }

Cevabı göster

function handleDown() { setCount(count - 1); }

Sayı ve buton: kavramları eşleştir

handleDown

Azaltma
handleReset

Sıfırlama
setCount(0)

Sıfır
<>...</>

Fragment

Sıradaki ders: Azaltma ve sıfırlama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler