ReactDərs 7 / 15

React formaları

Forma bir əməliyyatdır

onSubmit həm düymə, həm klaviatura göndərişini tutur. preventDefault səhifənin ilkin yenilənməsini dayandırır. Aşağıdakı komponent onSave adlı Promise qaytaran funksiya qəbul edir; onu real tətbiqin göndəriş məntiqi ilə birləşdir.

import { useState } from 'react';
export default function Signup({ onSave }) {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState('');
  async function submit(event) {
    event.preventDefault();
    if (status === 'saving' || !email.trim()) return;
    setStatus('saving');
    try {
      await onSave({ email: email.trim() });
      setStatus('saved');
    } catch { setStatus('error'); }
  }
  return <form onSubmit={submit}>
    <label htmlFor="email">E-poçt</label>
    <input id="email" type="email" required value={email}
      onChange={event => setEmail(event.target.value)} />
    <button type="submit" disabled={status === 'saving'}>Göndər</button>
    <p role="status">{status === 'saved' ? 'Göndərildi' :
      status === 'error' ? 'Alınmadı, yenidən sına' : status === 'saving' ? 'Göndərilir…' : ''}</p>
  </form>;
}

Nümunə

Validasiya və geri əlaqə

Native required və email yoxlaması ilə başla, biznes qaydalarını əlavə et. Xətanı hansı sahəyə aid olduğu ilə göstər; lazım olduqda aria-describedby və aria-invalid istifadə et. Server yenə ayrıca yoxlamalıdır.

Xətada istifadəçinin yazısını itirmə. Uğur mesajını yalnız əməliyyatın nəticəsinə əsasən göstər. Tətbiqin daxili səhifəsinə keçid etmək lazım olduqda router imkanlarından istifadə et; sadəcə formaya basıldığı üçün süni uğur göstərmə.

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

Əlaqəli girişləri form-da birləşdir, onSubmit-də göndərişi emal et. Dəyərləri yoxla, səhvləri aid olduğu sahənin yanında göstər və sorğu gedərkən təkrar göndərişin qarşısını al.

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

onSubmit və preventDefault
Forma validasiyası
Göndəriş, xəta və uğur vəziyyətləri

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Formanı yoxlayıb göndər

Yanlış girişin qarşısını al, düzgün məlumatla göndərişi tamamla.

Prosesi son vəziyyətə çatdır.

Forma boşdur
Giriş yanlışdır
Giriş hazırdır
Forma emal olundu

Forma boşdur

E-poçt daxil edilməlidir.

<input type="email" required>

Bu məşq prosesi modelləşdirir.

Özün sına

Ad və e-poçt forması qur. Boş sahələri rədd et, göndəriş zamanı düyməni bağla və uğur mesajını göstər.

Nəticəni necə yoxlayım?

Enter ilə submit işləyir; etibarsız giriş göndərilmir, gözləmə zamanı təkrar göndəriş bloklanır və xəta göstərilir.

Gözlənilən nəticə

Boş ad və yanlış e-poçt qəbul edilmir.
Göndəriş müddətində düymə bağlıdır; sonra nümunə uğur mesajı görünür.

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.

Bu nümunədə göndəriş gecikmə ilə modelləşdirilir, real serverə məlumat göndərilmir. Native validasiya və trimmed ad yoxlaması birlikdə işləyir.

App.jsx

import { useState } from 'react';
export default function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [sending, setSending] = useState(false);
  const [message, setMessage] = useState('');
  async function submit(event) {
    event.preventDefault();
    if (sending) return;
    if (!name.trim() || !email.trim()) { setMessage('Bütün sahələri doldur.'); return; }
    setSending(true); setMessage('Göndərilir…');
    try { await new Promise(resolve => setTimeout(resolve, 500)); setMessage('Nümunə göndəriş tamamlandı.'); }
    finally { setSending(false); }
  }
  return <form onSubmit={submit}>
    <label>Ad<input value={name} onChange={event => setName(event.target.value)} required /></label>
    <label>E-poçt<input type="email" value={email} onChange={event => setEmail(event.target.value)} required /></label>
    <button disabled={sending}>{sending ? 'Göndərilir…' : 'Göndər'}</button><p role="status">{message}</p>
  </form>;
}

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