React / Маягт (Forms)

Маягт (Forms)

Нэвтрэх, бүртгүүлэх, хайлт хийх, мессеж илгээх — бүгд маягт ашигладаг. React-д HTML маягт бичих нь ердийн HTML-с арай өөр — controlled component гэдэг ойлголт ашигладаг. Энэ хичээлд React маягт бичих стандарт аргыг суурьтай сурна.

Controlled Component гэж юу вэ?

Ердийн HTML-д <input> өөрийн утгаа өөрөө хадгалдаг. React-д бид useState-г ашиглан inputын утгыг өөрсдөө удирддаг — энийг controlled component гэнэ:

jsx

import { useState } from "react";

function BasicInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Нэрийгээ оруулна уу"
      />
      <p>Та бичлээ: {name}</p>
    </div>
  );
}

value={name} нь inputын утгыг state-тай синхрончилна. onChange нь хэрэглэгч бичих бүрт state-г шинэчилнэ. Ийнхүү React нь inputын мастер хянагч болдог.

Нэвтрэх маягт

Практик жишээ болгон нэвтрэх маягт бичицгээе. Олон талбартай маягт object state ашиглан удирдах нь тохиромжтой:

jsx

import { useState } from "react";

function LoginForm() {
  const [form, setForm] = useState({
    email: "",
    password: "",
  });
  const [error, setError] = useState("");

  function handleChange(e) {
    const { name, value } = e.target;
    setForm((prev) => ({ ...prev, [name]: value }));
  }

  function handleSubmit(e) {
    e.preventDefault();

    if (!form.email || !form.password) {
      setError("Бүх талбарыг бөглөнө үү.");
      return;
    }

    setError("");
    console.log("Нэвтрэх:", form);
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">И-мэйл</label>
        <input
          id="email"
          name="email"
          type="email"
          value={form.email}
          onChange={handleChange}
          placeholder="name@example.com"
        />
      </div>

      <div>
        <label htmlFor="password">Нууц үг</label>
        <input
          id="password"
          name="password"
          type="password"
          value={form.password}
          onChange={handleChange}
          placeholder="Нууц үг"
        />
      </div>

      {error && <p style={{ color: "#fb7185" }}>{error}</p>}

      <button type="submit">Нэвтрэх</button>
    </form>
  );
}

handleChange дотор [name]: value динамик key ашиглан нэг handler-ээр бүх inputыг удирдаж байна. name attribute нь e.target.name-тай нийцэх ёстой.

Select болон Textarea

<select> болон <textarea> ч controlled component аргаар ажиллана:

jsx

import { useState } from "react";

function ProfileForm() {
  const [level, setLevel] = useState("beginner");
  const [bio, setBio] = useState("");

  return (
    <form>
      {/* Select */}
      <div>
        <label htmlFor="level">Түвшин</label>
        <select
          id="level"
          value={level}
          onChange={(e) => setLevel(e.target.value)}
        >
          <option value="beginner">Эхлэгч</option>
          <option value="intermediate">Дунд</option>
          <option value="advanced">Дэвшилтэт</option>
        </select>
        <p>Сонгосон: {level}</p>
      </div>

      {/* Textarea */}
      <div>
        <label htmlFor="bio">Танилцуулга</label>
        <textarea
          id="bio"
          value={bio}
          onChange={(e) => setBio(e.target.value)}
          rows={4}
          placeholder="Өөрийгөө товчхон танилцуулна уу..."
        />
        <p>{bio.length} тэмдэгт</p>
      </div>
    </form>
  );
}

HTML-н <select>-д selected attribute ашиглаж байсан бол React-д value props-г <select> дээр тавина.

Checkbox болон Radio

jsx

import { useState } from "react";

function PreferenceForm() {
  const [agreed, setAgreed] = useState(false);
  const [theme, setTheme] = useState("dark");

  return (
    <div>
      {/* Checkbox */}
      <label>
        <input
          type="checkbox"
          checked={agreed}
          onChange={(e) => setAgreed(e.target.checked)}
        />
        Нөхцөл, болзолтой зөвшөөрч байна
      </label>
      <p>{agreed ? "✅ Зөвшөөрсөн" : "❌ Зөвшөөрөөгүй"}</p>

      {/* Radio */}
      <div>
        <label>
          <input
            type="radio"
            value="dark"
            checked={theme === "dark"}
            onChange={(e) => setTheme(e.target.value)}
          />
          Харанхуй
        </label>
        <label>
          <input
            type="radio"
            value="light"
            checked={theme === "light"}
            onChange={(e) => setTheme(e.target.value)}
          />
          Цайвар
        </label>
      </div>
      <p>Сонгосон: {theme}</p>
    </div>
  );
}

Checkbox-д checked болон e.target.checked ашиглана — value биш.

Дараагийн хичээлд:

useEffect hook ашиглан component дэлгэцэнд гарсны дараа ажиллах кодыг хэрхэн бичих, API-аас өгөгдөл татах, цаг тоолуур хийх аргыг судална.

← Өмнөх хичээлЖагсаалт ба key Дараах хичээл →useEffect hook