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

import { MouseEvent } from "react";

function ActionButtons() {
  // MouseEvent<T> — T нь event-г ажиллуулсан элементийн төрөл
  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
    console.log("Дарсан байрлал:", event.clientX, event.clientY);
    event.preventDefault();
  };

  const handleDivClick = (event: MouseEvent<HTMLDivElement>) => {
    console.log("Div дарагдлаа");
  };

  return (
    <div onClick={handleDivClick}>
      <button onClick={handleClick}>Товч</button>
    </div>
  );
}

// Inline бичихэд TypeScript автоматаар таньдаг — маш тохиромжтой
<button onClick={(e) => console.log(e.currentTarget.textContent)}>Товч</button>

import { ChangeEvent } from "react";
import { useState } from "react";

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // ChangeEvent<HTMLInputElement> — input элементийн өөрчлөлт
  const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
    setEmail(event.target.value);
  };

  // ChangeEvent<HTMLTextAreaElement> — textarea элементийн өөрчлөлт
  const handleNoteChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    console.log("Тэмдэглэл:", event.target.value);
  };

  // ChangeEvent<HTMLSelectElement> — select элементийн өөрчлөлт
  const handleCourseSelect = (event: ChangeEvent<HTMLSelectElement>) => {
    console.log("Сонгосон курс:", event.target.value);
  };

  return (
    <form>
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="И-мэйл"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Нууц үг"
      />
      <textarea onChange={handleNoteChange} placeholder="Тэмдэглэл" />
      <select onChange={handleCourseSelect}>
        <option value="javascript">JavaScript</option>
        <option value="react">React</option>
      </select>
    </form>
  );
}

import { FormEvent, useState } from "react";

interface RegisterData {
  username: string;
  email: string;
  password: string;
}

function RegisterForm() {
  const [data, setData] = useState<RegisterData>({
    username: "",
    email: "",
    password: "",
  });
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    // Хуудас дахин ачаалахгүй байхын тулд заавал бичих
    event.preventDefault();

    setIsLoading(true);
    try {
      // Суурьт илгээх кодоо энд бичнэ
      await fetch("/api/register", {
        method: "POST",
        body: JSON.stringify(data),
      });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={data.username}
        onChange={(e) =>
          setData((prev) => ({ ...prev, username: e.target.value }))
        }
        placeholder="Нэвтрэх нэр"
      />
      <input
        type="email"
        value={data.email}
        onChange={(e) =>
          setData((prev) => ({ ...prev, email: e.target.value }))
        }
        placeholder="И-мэйл"
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Бүртгэж байна..." : "Бүртгүүлэх"}
      </button>
    </form>
  );
}

import { KeyboardEvent } from "react";

function SearchInput() {
  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter") {
      console.log("Хайлт:", event.currentTarget.value);
    }

    if (event.key === "Escape") {
      event.currentTarget.blur();
    }

    // Ctrl + K товчлол
    if (event.ctrlKey && event.key === "k") {
      event.preventDefault();
      console.log("Хайлтын цонх нээлаа");
    }
  };

  return (
    <input
      type="search"
      onKeyDown={handleKeyDown}
      placeholder="Хайх... (Enter дарна уу)"
    />
  );
}