Forma bilan ishlash

Umumiy ko'rinish

React'da formalarni boshqarishning ozoda usuli — bu controlled inputs: React state har bir maydonda nima borligining yagona haqiqat manbai, input esa uni shunchaki ko'rsatadi. Buni ikki narsa bilan ulaysiz — value (nimani ko'rsatish) va onChange (qanday yangilash). Keling, kichik ro'yxatdan o'tish formasini quramiz.

Bitta controlled input

Controlled input — bu value'si state'dan keladigan input. Foydalanuvchi terganda, onChange ishga tushadi, siz event.target.value'ni o'qiysiz va uni state'ga qaytarib saqlaysiz. React qayta render qiladi va input yangi qiymatni ko'rsatadi.

import { useState } from "react";
 
function NameField() {
  const [name, setName] = useState("");
  return (
    <input
      value={name}
      onChange={(event) => setName(event.target.value)}
    />
  );
}

Bitta state object bilan bir nechta maydon

Har bir maydon uchun alohida useState o'rniga, ularning barchasini bitta object'da ushlab turishingiz mumkin. Har bir input'ga key'ga mos keladigan name atributini bering, so'ngra ularning barchasi uchun bitta handler ishlating. [event.target.name] qismi — bu computed key — u o'zgargan maydonni yangilaydi.

function SignupForm() {
  const [form, setForm] = useState({ email: "", password: "" });
 
  function handleChange(event) {
    const { name, value } = event.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  }
 
  return (

...prev spread mavjud maydonlarni nusxalaydi, shunda siz faqat o'zgarganini qayta yozasiz — hech qachon form'ni to'g'ridan-to'g'ri mutate qilmang. (prev) => ... shaklidan foydalanish eng xavfsiz, chunki u har doim eng so'nggi state ustiga quriladi.

Oddiy majburiy maydon tekshiruvi

Submit'da brauzer sahifani qayta yuklamasligi uchun event.preventDefault()'ni chaqiring, so'ngra maydonlarni o'zingiz tekshiring. Har qanday xabarni state'da saqlang, shunda uni ko'rsata olasiz.

const [error, setError] = useState("");
 
function handleSubmit(event) {
  event.preventDefault();
  if (!form.email || !form.password) {
    setError("Both fields are required.");
    return;
  }
  setError("");
  // all good — send the data

Uni <form onSubmit={handleSubmit}> bilan ulang va inputlar ostida {error && <p>{error}</p>} render qiling. error && xabarni faqat error bo'sh bo'lmagan string bo'lganda ko'rsatadi.

Suhbat maslahatlari

• Controlled input loop'ini tushuntiring: state'dan value, onChange state'ga qaytarib yozadi.
• State object'idagi bitta maydonni yangilaganingizda, boshqalarini tushirib qoldirmaslik uchun qolganini spread qiling ({ ...prev, [name]: value }).
• Submit'da event.preventDefault()'ni eslang va ma'lumot bilan biror ish qilishdan oldin uni tekshiring (validate).