1import { useState } from "react";
2
3function Forma() {
4  const [ism, setIsm] = useState("");
5
6  const handleChange = (e) => {
7    setIsm(e.target.value);
8  };
9
10  return (
11    <div>
12      <input
13        type="text"
14        value={ism}
15        onChange={handleChange}
16        placeholder="Ismingiz..."
17      />
18      <p>Salom, {ism || "mehmon"}!</p>
19    </div>
20  );
21}

1function handleChange(e) {
2  console.log(e.target);         // HTML element
3  console.log(e.target.value);   // yozilgan matn
4  console.log(e.target.name);    // name atributi
5  console.log(e.target.type);    // "text", "email" va h.k.
6  console.log(e.target.checked); // checkbox/radio uchun
7
8  // Ba'zi eventlarda
9  e.preventDefault();            // default harakatni bloklash
10  e.stopPropagation();           // yuqoriga uzatmaslik
11}

1function InputlarMisoli() {
2  const [matn, setMatn] = useState("");
3  const [email, setEmail] = useState("");
4  const [yosh, setYosh] = useState(0);
5  const [fikr, setFikr] = useState("");
6  const [jinsi, setJinsi] = useState("erkak");
7  const [roziman, setRoziman] = useState(false);
8
9  return (
10    <form>
11      <input value={matn} onChange={e => setMatn(e.target.value)} />
12
13      <input
14        type="email"
15        value={email}
16        onChange={e => setEmail(e.target.value)}
17      />
18
19      <input
20        type="number"
21        value={yosh}
22        onChange={e => setYosh(Number(e.target.value))}
23      />
24
25      <textarea
26        value={fikr}
27        onChange={e => setFikr(e.target.value)}
28      />
29
30      <select value={jinsi} onChange={e => setJinsi(e.target.value)}>
31        <option value="erkak">Erkak</option>
32        <option value="ayol">Ayol</option>
33      </select>
34
35      <input
36        type="checkbox"
37        checked={roziman}
38        onChange={e => setRoziman(e.target.checked)}
39      />
40    </form>
41  );
42}

1import { useRef } from "react";
2
3function Forma() {
4  const inputRef = useRef(null);
5
6  const yubor = (e) => {
7    e.preventDefault();
8    // Qiymat submit paytida olinadi
9    const qiymat = inputRef.current.value;
10    alert("Siz yozdingiz: " + qiymat);
11
12    inputRef.current.value = "";   // tozalash
13  };
14
15  return (
16    <form onSubmit={yubor}>
17      <input
18        type="text"
19        ref={inputRef}
20        defaultValue=""
21      />
22      <button type="submit">Yubor</button>
23    </form>
24  );
25}

1// ✅ STATE — foydalanuvchi yozganda o'zgarish ko'rinsa
2const [qidiruv, setQidiruv] = useState("");
3const natijalar = userlar.filter(u => u.ism.includes(qidiruv));
4
5// ✅ REF — faqat submit paytida qiymat kerak
6const ismRef = useRef(null);
7const yubor = () => {
8  fetch("/api", { body: ismRef.current.value });
9};
10
11// ✅ REF — focus, scroll va boshqa imperative amallar
12const inputRef = useRef(null);
13useEffect(() => inputRef.current.focus(), []);

1function Forma() {
2  const [data, setData] = useState({
3    ism: "",
4    email: "",
5    parol: "",
6  });
7
8  // Hammaga bitta handler — name atributidan foydalanamiz
9  const onChange = (e) => {
10    const { name, value } = e.target;
11    setData(oldin => ({ ...oldin, [name]: value }));
12  };
13
14  const yubor = (e) => {
15    e.preventDefault();
16    console.log(data);
17  };
18
19  return (
20    <form onSubmit={yubor}>
21      <input name="ism" value={data.ism} onChange={onChange} />
22      <input name="email" value={data.email} onChange={onChange} />
23      <input name="parol" type="password" value={data.parol} onChange={onChange} />
24      <button type="submit">Yubor</button>
25    </form>
26  );
27}

1import { useRef, useEffect } from "react";
2
3function Qidiruv() {
4  const inputRef = useRef(null);
5
6  // Sahifa ochilganda input'ga fokus
7  useEffect(() => {
8    inputRef.current.focus();
9  }, []);
10
11  return <input ref={inputRef} placeholder="Qidiruv..." />;
12}

1function Sahifa() {
2  const bolimRef = useRef(null);
3
4  const scrollPast = () => {
5    bolimRef.current.scrollIntoView({ behavior: "smooth" });
6  };
7
8  return (
9    <div>
10      <button onClick={scrollPast}>Pastga o'tish</button>
11
12      <div style={{ height: 2000 }}>Uzun kontent...</div>
13
14      <div ref={bolimRef}>
15        <h2>Bu yerga scroll bo'ladi</h2>
16      </div>
17    </div>
18  );
19}

1function Komponent() {
2  const renderSoni = useRef(0);
3
4  // Har render'da oshadi, LEKIN qayta render chaqirmaydi
5  renderSoni.current++;
6
7  return <p>Bu komponent {renderSoni.current} marta chizildi</p>;
8}