TypeScript / React Events төрөлжүүлэх

React Events төрөлжүүлэх

React дотор товч дарах, input бичих, форм илгээх зэрэг хэрэглэгчийн үйлдэл бүр event үүсгэдэг. TypeScript эдгээр event-ийн төрлийг мэдвэл IDE-д autocomplete ажиллаж, аргументийн алдааг бичих үед л илрүүлдэг.

Энэ хичээлд хамгийн түгээмэл React event-үүдийг TypeScript-ээр хэрхэн зөв тодорхойлохыг сурна.

onClick — товч дарах event

onClick handler-т React-ийн React.MouseEvent төрөл хэрэглэнэ. Ямар элементэд зориулагдсаныг Generic-ээр заана:

tsx
"use client";

import { useState } from "react";

function ТовчЖишээ() {
  const [тоо, setТоо] = useState(0);

  // React.MouseEvent<HTMLButtonElement> — button-ий click event
  const товчДарах = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    console.log("Дарагдсан байршил:", event.clientX, event.clientY);
    setТоо((өмнөх) => өмнөх + 1);
  };

  // Хэрэв event параметр хэрэггүй бол орхиж болно
  const энгийнДарах = () => {
    setТоо(0);
  };

  return (
    <div>
      <p>Тоо: {тоо}</p>
      <button onClick={товчДарах}>Нэмэх</button>
      <button onClick={энгийнДарах}>Шинэчлэх</button>
    </div>
  );
}

Event параметр хэрэггүй бол () => void хэлбэрийн энгийн функц хэрэглэж болно — TypeScript автоматаар зөвшөөрнө.

onChange — input өөрчлөх event

Хэрэглэгч input дотор бичихэд onChange ажилладаг. Энэ нь хамгийн их хэрэглэгддэг event тул сайн мэдэх нь чухал:

tsx
"use client";

import { useState } from "react";

function НэвтрэхМаягт() {
  const [и_мэйл, setИМэйл] = useState("");
  const [нууцҮг, setНуucҮг] = useState("");

  // React.ChangeEvent<HTMLInputElement> — input-ийн өөрчлөлтийн event
  const и_мэйлОрсол = (event: React.ChangeEvent<HTMLInputElement>) => {
    setИМэйл(event.target.value); // .value нь бичсэн текст
  };

  const нууцҮгОрсол = (event: React.ChangeEvent<HTMLInputElement>) => {
    setНуucҮг(event.target.value);
  };

  // select элементэд ч мөн адил
  const хэлСонгох = (event: React.ChangeEvent<HTMLSelectElement>) => {
    console.log("Сонгосон:", event.target.value);
  };

  return (
    <form>
      <input
        type="email"
        value={и_мэйл}
        onChange={и_мэйлОрсол}
        placeholder="И-мэйл"
      />
      <input
        type="password"
        value={нууцҮг}
        onChange={нууцҮгОрсол}
        placeholder="Нууц үг"
      />
      <select onChange={хэлСонгох}>
        <option value="mn">Монгол</option>
        <option value="en">English</option>
      </select>
    </form>
  );
}

event.target.value нь string гэж TypeScript автоматаар мэдэх тул .toUpperCase(), .trim() гэх мэт string method-уудыг шууд ашиглаж болно.

onSubmit — форм илгээх event

Форм илгээхэд хуудас refresh болохоос сэргийлж event.preventDefault() дуудах нь зайлшгүй:

tsx
"use client";

import { useState } from "react";

interface МаягтийнУтга {
  нэр: string;
  и_мэйл: string;
}

function БүртгүүлэхМаягт() {
  const [утга, setУтга] = useState<МаягтийнУтга>({
    нэр: "",
    и_мэйл: "",
  });
  const [ачааллаж, setАчааллаж] = useState(false);

  const маягтИлгээх = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault(); // хуудас refresh болохоос сэргийлнэ

    setАчааллаж(true);
    try {
      await fetch("/api/register", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(утга),
      });
      console.log("Бүртгэл амжилттай!");
    } catch {
      console.error("Алдаа гарлаа");
    } finally {
      setАчааллаж(false);
    }
  };

  const оролтОрсол = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setУтга((өмнөх) => ({ ...өмнөх, [name]: value }));
  };

  return (
    <form onSubmit={маягтИлгээх}>
      <input name="нэр" value={утга.нэр} onChange={оролтОрсол} />
      <input name="и_мэйл" value={утга.и_мэйл} onChange={оролтОрсол} />
      <button type="submit" disabled={ачааллаж}>
        {ачааллаж ? "Хадгалж байна..." : "Бүртгүүлэх"}
      </button>
    </form>
  );
}

Түгээмэл event төрлүүдийн лавлах хүснэгт

| Event | TypeScript төрөл | Хэрэглэх газар | |---|---|---| | onClick | React.MouseEvent<HTMLButtonElement> | button, div | | onChange | React.ChangeEvent<HTMLInputElement> | input, textarea | | onChange | React.ChangeEvent<HTMLSelectElement> | select | | onSubmit | React.FormEvent<HTMLFormElement> | form | | onKeyDown | React.KeyboardEvent<HTMLInputElement> | input, textarea | | onFocus | React.FocusEvent<HTMLInputElement> | input |

tsx
// onKeyDown жишээ — Enter товч дарахад ажиллуулах
const товчлуурДарах = (event: React.KeyboardEvent<HTMLInputElement>) => {
  if (event.key === "Enter") {
    console.log("Enter дарагдлаа!");
  }
  if (event.key === "Escape") {
    console.log("Escape дарагдлаа!");
  }
};

<input onKeyDown={товчлуурДарах} placeholder="Enter дарна уу..." />

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

TypeScript decorator-ийн үндсийг — class болон method-д тайлбар нэмэх хүчирхэг хэрэгслийг — сурна.

← Өмнөх хичээлReact Hooks төрөлжүүлэхДараах хичээл →Decorator үндэс