React / Үйл явдал (Events)

Үйл явдал (Events)

Хэрэглэгч товч дарах, текст бичих, маусаар хөдөлгөх бүрт event буюу үйл явдал үүсдэг. React-д эдгээр event-уудыг сонсож хариу үйлдэл хийдэг функцуудыг event handler гэнэ. Энэ хичээлд React-н event системийг гүнзгийрч судалж, практикт хамгийн их тохиолддог event-уудтай танилцана.

onClick — товч дарах

Хамгийн нийтлэг event бол onClick юм. JSX-д event handler-г { } хаалтад функц хэлбэрээр дамжуулна:

jsx
function AlertButton() {
  function handleClick() {
    alert("Товч дарлаа!");
  }

  return (
    <div>
      {/* Функцийн нэрийг дамжуулна — дуудахгүй */}
      <button onClick={handleClick}>Дарах</button>

      {/* Arrow function ашигласан inline хэлбэр */}
      <button onClick={() => alert("Мөн дарлаа!")}>Бас дарах</button>
    </div>
  );
}

onClick={handleClick} гэж бичнэ — onClick={handleClick()} биш. Хаалт нэмбэл функцийг тэр даруй дуудаж, рендер хийхэд ажиллана, дарах үед биш.

Event Object

Handler функц дуудагдахад React автоматаар event object дамжуулдаг. Энэ объектоос дарсан товчны мэдээлэл, input-н утга зэргийг авч болно:

jsx
function InputTracker() {
  function handleChange(event) {
    console.log("Утга:", event.target.value);
    console.log("Элементийн нэр:", event.target.name);
  }

  function handleKeyDown(event) {
    if (event.key === "Enter") {
      console.log("Enter дарлаа!");
    }
  }

  return (
    <div>
      <input
        name="username"
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        placeholder="Бичнэ үү..."
      />
    </div>
  );
}

event.target нь event үүссэн DOM элементийг заана. Input-н хувьд event.target.value нь бичсэн текстийг авна.

Нийтлэг Event-үүд

React-д дараах event-уудыг хамгийн их ашигладаг:

jsx
function EventExamples() {
  return (
    <div
      onMouseEnter={() => console.log("Маус орлоо")}
      onMouseLeave={() => console.log("Маус гарлаа")}
    >
      {/* onClick — дарах */}
      <button onClick={() => console.log("Дарлаа")}>Дарах</button>

      {/* onChange — утга өөрчлөгдөх */}
      <input onChange={(e) => console.log(e.target.value)} />

      {/* onFocus / onBlur — фокус авах / алдах */}
      <input
        onFocus={() => console.log("Фокус авлаа")}
        onBlur={() => console.log("Фокус алдлаа")}
      />

      {/* onSubmit — маягт илгээх */}
      <form
        onSubmit={(e) => {
          e.preventDefault();
          console.log("Маягт илгээгдлээ");
        }}
      >
        <button type="submit">Илгээх</button>
      </form>
    </div>
  );
}

onSubmit дотор e.preventDefault() дуудах нь хуудсыг дахин ачаалахаас сэргийлдэг — энэ бол маягттай ажиллахад заавал хэрэгтэй.

State-тай хослуулах

Event handler нь useState-тай хамт ажиллах үед component шинэчлэгддэг:

jsx
import { useState } from "react";

function LikeButton() {
  const [likes, setLikes] = useState(0);
  const [liked, setLiked] = useState(false);

  function handleLike() {
    if (liked) {
      setLikes(likes - 1);
      setLiked(false);
    } else {
      setLikes(likes + 1);
      setLiked(true);
    }
  }

  return (
    <button
      onClick={handleLike}
      style={{ color: liked ? "#f43f5e" : "#94a3b8" }}
    >
      ♥ {likes}
    </button>
  );
}

Параметр дамжуулах

Handler-д нэмэлт мэдээлэл дамжуулахдаа arrow function ашиглана:

jsx
import { useState } from "react";

function ColorPicker() {
  const [selected, setSelected] = useState("blue");

  const colors = ["blue", "green", "red", "purple"];

  function handleSelect(color) {
    setSelected(color);
  }

  return (
    <div>
      <p>Сонгосон өнгө: {selected}</p>
      {colors.map((color) => (
        <button
          key={color}
          onClick={() => handleSelect(color)}
          style={{
            backgroundColor: selected === color ? color : "transparent",
            border: `2px solid ${color}`,
            margin: "4px",
          }}
        >
          {color}
        </button>
      ))}
    </div>
  );
}

onClick={() => handleSelect(color)} гэж arrow function ашигласнаар color параметрийг хамт дамжуулж болно.

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

Нөхцөлт рендер буюу тодорхой нөхцөл биелсэн үед л UI-н тодорхой хэсгийг харуулах аргыг судална. if, тернар оператор, && — аль болгохыг хэзээ ашиглахыг ойлгоно.

← Өмнөх хичээлuseState hookДараах хичээл →Нөхцөлт рендер