ReactDərs 4 / 15

Hadisələr və vəziyyət

Hadisə funksiya qəbul edir

JSX-də onClick={handleClick} funksiyanı bağlayır; onClick={handleClick()} isə render zamanı çağırır. Arqument vermək üçün wrapper yaz: onClick={() => choose(id)}. State komponentin renderlər arasında saxladığı yaddaşdır.

import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <section>
    <p>Say: {count}</p>
    <button type="button" onClick={() => setCount(value => value + 1)}>Artır</button>
    <button type="button" onClick={() => setCount(value => Math.max(0, value - 1))}>
      Azalt
    </button>
  </section>;
}

Nümunə

State cari renderin snapshot-udur

Setter yeniləmə planlayır; cari funksiyadakı count dəyişəni dərhal yeni qiymət almır. Əvvəlki state-dən hesablama üçün updater funksiyası istifadə et. Ardıcıl iki setCount(value => value + 1) iki artımı düzgün növbələyir.

Sinifdə this.state və this.setState ilə rastlaşarsan. Sinif setState obyekt xassələrini birləşdirə bilir; useState setter-i bütün dəyəri əvəz edir. Obyekt yeniləyəndə saxlanmalı sahələri spread ilə köçür. State-i birbaşa dəyişmək React-ə etibarlı yeniləmə siqnalı vermir. Hadisədəki event.currentTarget və event.target fərqini burada da saxla.

Əlavə qeydlər və mənbələr

Hadisə prop-una çağırışın nəticəsini deyil, funksiyanı ötür. State interfeysin dəyişən yaddaşıdır; əvvəlki state-dən asılı yeniləməni updater funksiyası ilə et və birbaşa mutasiyadan çəkin.

Niyə vacibdir?

Komponentlər və state mürəkkəb interfeysin hissələrini idarə etməyə kömək edir.

Əvvəlki biliklər

Bu mövzuda

onClick və hadisə obyekti
state, setState və useState
Əvvəlki vəziyyətdən yeniləmə

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Əvvəlki state-dən hesabla

Əvvəlki dəyəri və artımı dəyiş. Nəticəni müqayisə et.

Əvvəlki count 0Artım 1

Hədəf: Artımı 2 et.

Canlı nəticə

Giriş0

Nəticə1

Mənbə kodu

setCount(previous => previous + 1);
// previous = 0

Özün sına

Artırma və azaltma düymələri olan sayğac yarat. Ardıcıl yeniləmələrdə funksional setter istifadə et və sıfırdan aşağı düşməni dayandır.

Nəticəni necə yoxlayım?

Sayğac artır və azalır, sıfırdan aşağı düşmür; ardıcıl yeniləmələr əvvəlki state-dən düzgün hesablanır.

Gözlənilən nəticə

İlkin say 0-dır; Artır iki dəfə seçiləndə 2 olur.
Azalt dəfələrlə seçilsə də say mənfi olmur.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Növbəti say əvvəlki dəyərdən hesablandığı üçün funksional setter istifadə olunur. Azaltma sıfırda dayanır.

App.jsx

import { useState } from 'react';
export default function App() {
  const [count, setCount] = useState(0);
  return <section><h1>Say: {count}</h1>
    <button type="button" onClick={() => setCount(previous => Math.max(0, previous - 1))}>Azalt</button>
    <button type="button" onClick={() => setCount(previous => previous + 1)}>Artır</button>
  </section>;
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.