Chapter 7 — Event Handling

State — ma'lumotni saqlaydi. Event handling — foydalanuvchi harakati asosida shu state'ni qachon o'zgartirishni belgilaydi.

---

7.1 onClick va Argument Uzatish

Example

App.jsx
React JSXNusxalash
01function LikeButton() {
02  function handleClick() {
03    console.log("Layk bosildi!");
04  }
05  return <button onClick={handleClick}>❤️</button>;
06}
07 
08function TodoItem({ id, onDelete }) {
09  return <button onClick={() => onDelete(id)}>O'chirish</button>;
10}

⚠️ Common Mistake
onClick={onDelete(id)} deb yozish — bu funksiyani darhol chaqiradi, render paytida. To'g'risi: onClick={() => onDelete(id)}.

7.2 onChange va Controlled Input

Example

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

7.3 onSubmit, preventDefault va stopPropagation

Example

App.jsx
React JSXNusxalash
01function handleSubmit(e) {
02  e.preventDefault(); // sahifa qayta yuklanishini to'xtatadi
03}
04 
05<div onClick={(e) => e.stopPropagation()}>Modal</div>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bosilganda konsolga xabar chiqaradigan tugma yarating.

🟡 Exercise 2 — Medium

Task: Input qiymatini real vaqtda state'ga yozib boruvchi controlled input yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01<button onClick={console.log("bosildi")}>Bos</button>

Your Task: Nega bu kod sahifa yuklanishi bilanoq konsolga chiqadi, bosishni kutmasdan?

<details> <summary>Solution</summary> `console.log("bosildi")` darhol chaqirilib, natijasi (`undefined`) `onClick`ka uzatiladi. To'g'ri yechim: ```jsx <button onClick={() => console.log("bosildi")}>Bos</button> ``` </details>

📌 Chapter Summary

Event handler har doim funksiya sifatida uzatiladi, natija emas. preventDefault() — brauzer default xatti-harakatini to'xtatadi. stopPropagation() — hodisaning yuqoriga "ko'tarilishini" to'xtatadi.

🎯 Key Takeaways

• Handler — funksiya, natija emas
• Argument kerak bo'lsa, arrow function ishlating
• preventDefault / stopPropagation — brauzer xatti-harakatini boshqaradi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01<button onClick={() => fn()}>...</button>
02<input value={v} onChange={(e) => setV(e.target.value)} />
03<form onSubmit={(e) => { e.preventDefault(); }}>...</form>

---