ReactDərs 6 / 15

Input sahəsi

Dəyərin bir mənbəyi olsun

İdarə olunan input-un value dəyəri state-dən gəlir, onChange isə state-i yeniləyir. Checkbox üçün checked istifadə olunur. value verib onChange yazmasan istifadəçinin dəyişikliyi state-də saxlanmayacaq.

import { useState } from 'react';
export default function ProfileFields() {
  const [name, setName] = useState('');
  const [notify, setNotify] = useState(false);
  const [visited, setVisited] = useState(false);
  return <section>
    <label htmlFor="name">Ad</label>
    <input id="name" value={name}
      onChange={event => setName(event.target.value)}
      onFocus={() => setVisited(false)} onBlur={() => setVisited(true)} />
    {visited && !name.trim() && <p>Adını daxil et.</p>}
    <label><input type="checkbox" checked={notify}
      onChange={event => setNotify(event.target.checked)} /> Bildiriş al</label>
    <p>{name || 'Ad daxil edilməyib'} · {notify ? 'Bildiriş açıqdır' : 'Bildiriş bağlıdır'}</p>
  </section>;
}

Nümunə

Fokus və ilkin dəyər

onFocus sahəyə giriş, onBlur çıxış barədə xəbər verir. Xəta mesajını istifadəçini yazmağa başlayanda narahat etmədən uyğun vaxtda göstər. htmlFor ilə label-ı input id-sinə bağla.

Mətn üçün ilkin state-i boş sətir saxla; əvvəl undefined sonra mətn vermək idarə olunma rejimini dəyişə bilər. Yalnız ilkin dəyər lazım olan idarə olunmayan sahədə defaultValue istifadə edilə bilər. Girişin dəyəri rəqəm görünəndə də çox vaxt mətndir; hesablamadan əvvəl açıq çevirmə və validasiya et.

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

İdarə olunan input dəyərini state-dən alır və onChange ilə yeniləyir. label-ın htmlFor dəyərini input-un id-si ilə bağla, focus və blur vasitəsilə sahənin istifadə vəziyyətini müşahidə et.

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

onChange, onFocus və onBlur
İdarə olunan input
value, checked, htmlFor və id

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

İdarə olunan input-u dəyiş

Sahədə yazdığın dəyər state və görünüşdə bir mənbədən gəlsin.

Input dəyəri

Hədəf: Input-a Salam yaz.

Canlı nəticə

Giriş"Test"

Nəticə"Test"

Mənbə kodu

<input value={"Test"} onChange={handleChange} />

Özün sına

Ad və bildiriş checkbox-u olan komponent yarat. Girişləri state ilə idarə et və cari dəyərləri səhifədə göstər.

Nəticəni necə yoxlayım?

Mətn və checkbox state ilə idarə olunur, sahə etiketləri işləyir və input controlled/uncontrolled arasında dəyişmir.

Gözlənilən nəticə

İlkin mətn Aysel—Bildiriş: açıq olur.
Ad və checkbox dəyişəndə səhifə cari dəyərləri göstərir.

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.

Mətn value, checkbox isə checked vasitəsilə state-ə bağlanır.

App.jsx

import { useState } from 'react';
export default function App() {
  const [name, setName] = useState('Aysel');
  const [notify, setNotify] = useState(true);
  return <><label htmlFor="name">Ad</label><input id="name" value={name} onChange={event => setName(event.target.value)} />
    <label><input type="checkbox" checked={notify} onChange={event => setNotify(event.target.checked)} />Bildiriş</label>
    <p>{name} — Bildiriş: {notify ? 'açıq' : 'bağlı'}</p></>;
}

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