Chapter 10 — Formalar

Events va State birlashib — formalarni boshqarish uchun asos yaratadi.

---

10.1 Controlled Input

Example

App.jsx
React JSXNusxalash
01const [name, setName] = useState("");
02return <input value={name} onChange={(e) => setName(e.target.value)} />;

Why Does It Exist?

HTML formalarida input o'z ichki holatini o'zi saqlaydi (uncontrolled). React'da ma'lumotni state orqali boshqarish (controlled) — validatsiya, formatlash va real-vaqtda reaksiyani osonlashtiradi.

10.2 Bir Nechta Input va Object State

Example

App.jsx
React JSXNusxalash
01const [form, setForm] = useState({ email: "", password: "" });
02function handleChange(e) {
03  const { name, value } = e.target;
04  setForm({ ...form, [name]: value });
05}

10.3 Checkbox, Select va Validatsiya

Example

App.jsx
React JSXNusxalash
01<input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
02 
03function handleSubmit(e) {
04  e.preventDefault();
05  if (!form.email.includes("@")) {
06    setError("Email noto'g'ri");
07    return;
08  }
09}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ism kiritish uchun controlled input yarating.

🟡 Exercise 2 — Medium

Task: Email + parol maydonlari bo'lgan forma, bitta object state bilan.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01const [email, setEmail] = useState("");
02return <input value={email} />;

Your Task: Foydalanuvchi bu inputga yoza olmaydi. Nega?

<details> <summary>Solution</summary> `onChange` yo'q — shuning uchun `email` state'i hech qachon yangilanmaydi, input "qotib qolgan" qiymat bilan qoladi. Yechim: ```jsx <input value={email} onChange={(e) => setEmail(e.target.value)} /> ``` </details>

📌 Chapter Summary

Controlled input — value state'dan, o'zgarish onChange orqali. Bir nechta input uchun bitta object state qulay yechim. Validatsiya — submitdan oldin yoki real-vaqtda amalga oshiriladi.

🎯 Key Takeaways

• value + onChange — controlled input formulasi
• Computed property name — bir nechta inputni bitta handler bilan boshqarish
• Checkbox uchun checked, boshqa inputlar uchun value

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01<input value={v} onChange={(e) => setV(e.target.value)} />
02<input type="checkbox" checked={c} onChange={(e) => setC(e.target.checked)} />
03function handleChange(e) {
04  const { name, value } = e.target;
05  setForm({ ...form, [name]: value });
06}

---