Formalar

import { useState } from "react";
import { chiz, yoz, matn } from "./dom-muhit.mjs";

function Kirish() {
    const [ism, ozgartir] = useState("");

    return (
        <div>
            <input value={ism} onChange={(h) => ozgartir(h.target.value)} />
            <p id="aks">Yozilgan: {ism || "(bo'sh)"}</p>
            <p id="uzunlik">Uzunligi: {ism.length}</p>
        </div>
    );
}

await chiz(<Kirish />);
console.log(matn("#aks"), "|", matn("#uzunlik"));

await yoz("input", "Malika");
console.log(matn("#aks"), "|", matn("#uzunlik"));

import { useState } from "react";
import { chiz, yoz, matn } from "./dom-muhit.mjs";

function Forma() {
    const [malumot, ozgartir] = useState({ ism: "", email: "" });

    function maydonOzgardi(hodisa) {
        const { name, value } = hodisa.target;
        ozgartir((oldingi) => ({ ...oldingi, [name]: value }));
    }

    return (
        <form>
            <input name="ism" value={malumot.ism} onChange={maydonOzgardi} />
            <input
                name="email"
                type="email"
                value={malumot.email}
                onChange={maydonOzgardi}
            />
            <p id="aks">
                {malumot.ism || "(bo'sh)"} / {malumot.email || "(bo'sh)"}
            </p>
        </form>
    );
}

await chiz(<Forma />);
console.log(matn("#aks"));

await yoz("input[name=ism]", "Nodira");
await yoz("input[name=email]", "[email protected]");
console.log(matn("#aks"));

import { useState } from "react";
import { chiz, bos, matn, html } from "./dom-muhit.mjs";

function Sozlamalar() {
    const [guruh, guruhniOzgartir] = useState("A1");
    const [rozi, roziniOzgartir] = useState(false);

    return (
        <div>
            <select
                value={guruh}
                onChange={(h) => guruhniOzgartir(h.target.value)}
            >
                <option value="A1">A1</option>
                <option value="B2">B2</option>
            </select>
            <input
                id="rozi"
                type="checkbox"
                checked={rozi}
                onChange={(h) => roziniOzgartir(h.target.checked)}
            />
            <p id="aks">Guruh: {guruh}, rozi: {rozi ? "ha" : "yo'q"}</p>
        </div>
    );
}

await chiz(<Sozlamalar />);
console.log(matn("#aks"));

await bos("#rozi");
console.log(matn("#aks"));

import { useState } from "react";
import { chiz, bos, yoz, matn } from "./dom-muhit.mjs";

function tekshir({ ism, yosh }) {
    const xatolar = {};
    if (ism.trim().length < 2) xatolar.ism = "ism juda qisqa";
    const son = Number(yosh);
    if (!Number.isInteger(son) || son < 1 || son > 120) {
        xatolar.yosh = "yosh 1 va 120 orasida bo'lsin";
    }
    return xatolar;
}

function Forma() {
    const [malumot, ozgartir] = useState({ ism: "", yosh: "" });
    const [xatolar, xatolarniOzgartir] = useState({});
    const [natija, natijaniOzgartir] = useState("hali yuborilmadi");

    function maydon(hodisa) {
        const { name, value } = hodisa.target;
        ozgartir((oldingi) => ({ ...oldingi, [name]: value }));
    }

    function yuborildi(hodisa) {
        hodisa.preventDefault();
        const topilgan = tekshir(malumot);
        xatolarniOzgartir(topilgan);

        if (Object.keys(topilgan).length === 0) {
            natijaniOzgartir(`qabul qilindi: ${malumot.ism}`);
        } else {
            natijaniOzgartir("tekshiruvdan o'tmadi");
        }
    }

    return (
        <form onSubmit={yuborildi}>
            <input name="ism" value={malumot.ism} onChange={maydon} />
            <input name="yosh" value={malumot.yosh} onChange={maydon} />
            <button type="submit">Yuborish</button>
            <p id="xato">
                {Object.values(xatolar).join("; ") || "xato yo'q"}
            </p>
            <p id="natija">{natija}</p>
        </form>
    );
}

await chiz(<Forma />);
console.log(matn("#natija"));

await bos("button");
console.log("bo'sh forma:", matn("#xato"));

await yoz("input[name=ism]", "M");
await yoz("input[name=yosh]", "200");
await bos("button");
console.log("noto'g'ri:", matn("#xato"));

await yoz("input[name=ism]", "Malika");
await yoz("input[name=yosh]", "20");
await bos("button");
console.log("to'g'ri:", matn("#natija"));

import { useRef, useState } from "react";
import { chiz, bos, yoz, matn } from "./dom-muhit.mjs";

function Boshqarilmaydigan() {
    const maydon = useRef(null);
    const [natija, ozgartir] = useState("");

    function yuborildi(hodisa) {
        hodisa.preventDefault();
        ozgartir(maydon.current.value);
    }

    return (
        <form onSubmit={yuborildi}>
            <input ref={maydon} defaultValue="boshlang'ich" />
            <button type="submit">O'qish</button>
            <p id="natija">{natija || "(hali o'qilmadi)"}</p>
        </form>
    );
}

await chiz(<Boshqarilmaydigan />);
console.log(matn("#natija"));

await yoz("input", "yangi matn");
console.log("yozgandan keyin:", matn("#natija"));

await bos("button");
console.log("o'qigandan keyin:", matn("#natija"));