පාඩම 5: State යාවත්කාලීන කිරීම සහ Events 🖱️

බොත්තම් click කිරීම වැනි පරිශීලක ක්‍රියා (user events) හසුරුවා ගන්නා ආකාරය සහ ඒ හරහා state එක යාවත්කාලීන කරන ආකාරය ඉගෙන ගනිමු.

---

අපි වෙනස් කරන ගොනුව (File to Edit)

මෙම පාඩමේදී අප සිදුකරන සියලුම වෙනස්කම්, අපගේ ප්‍රධාන component ගොනුව වන `src/App.jsx` තුල සිදු කෙරේ. ඔබගේ project ෆෝල්ඩරයේ ව්‍යුහය මෙසේ දිස්වනු ඇත:

counter-app/
└── src/
    ├── App.css
    ├── App.jsx  <-- ✍️ අපි වෙනස් කරන්නේ මෙම ගොනුවයි
    ├── index.css
    └── main.jsx

---

සජීවී ආදර්ශනය (Live Demo) 🚀

මෙම පාඩමේදී අප ලියන කේතය සම්පූර්ණ වූ විට, අපගේ Counter App එක මෙසේ ක්‍රියාත්මක වනු ඇත. පහත බොත්තම් click කර බලන්න!

---

React වල Event Handling

React වලදී events හැසිරවීම, සාමාන්‍ය HTML වලට බොහෝ සෙයින් සමානයි. නමුත් ප්‍රධාන වෙනස්කම් දෙකක් ඇත:

1. React events නම් කරන්නේ `camelCase` ක්‍රමයටයි (උදා: `onclick` වෙනුවට `onClick`).
2. String එකක් ලෙස function call එකක් ලබා දෙනවා වෙනුවට, JSX වලදී event handler එකට curly braces {} තුල function එකම ලබා දේ.

<!-- සාමාන්‍ය HTML -->
<button onclick="myFunction()">Click Me</button>

<!-- React JSX -->
<button onClick={myFunction}>Click Me</button>

Event Handler Functions නිර්මාණය කිරීම

අපගේ Counter App එකේ බොත්තම් තුන සඳහා, අගය වැඩි කිරීමට, අඩු කිරීමට, සහ reset කිරීමට functions තුනක් `App` component එක තුල නිර්මාණය කරමු. මෙම functions තුලදී, state එක යාවත්කාලීන කිරීමට පෙර පාඩමේදී අපට ලැබුණු `setCount` function එක භාවිතා කරමු.

// src/App.jsx

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // 1. Event handler functions 3 නිර්මාණය කරන්න
  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  const handleReset = () => {
    setCount(0);
  };

  return (
    //... JSX කේතය
  );
}

export default App;

මෙහිදී, `setCount(count + 1)` ලෙස call කළ විට, React හට `count` state එකේ නව අගය `count + 1` බව දන්වයි. එවිට React ස්වයංක්‍රීයව component එක re-render කර, UI එකේ පෙන්වන අගය යාවත්කාලීන කරයි.

---

Functions, බොත්තම් වලට සම්බන්ධ කිරීම

අවසාන පියවර ලෙස, අප නිර්මාණය කළ functions, අදාළ බොත්තම් වල `onClick` event එකට සම්බන්ධ කරමු.

// src/App.jsx (සම්පූර්ණ කේතය)

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card text-center">
            <div className="card-header">
              React Counter App
            </div>
            <div className="card-body">
              <h1 className="display-1">{count}</h1>
            </div>
            <div className="card-footer">
              {/* 2. onClick event handlers සම්බන්ධ කරන්න */}
              <button className="btn btn-success me-2" onClick={handleIncrement}>Plus (+)</button>
              <button className="btn btn-warning me-2" onClick={handleReset}>Reset</button>
              <button className="btn btn-danger" onClick={handleDecrement}>Minus (-)</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

ප්‍රතිඵලය (Result)

මෙම වෙනස්කම් save කර, ඔබගේ `counter-app` project එකේ browser window එක බලන්න. දැන් Plus (+), Reset, සහ Minus (-) බොත්තම් click කළ විට, counter එකේ අගය නිවැරදිව යාවත්කාලීන වන බව ඔබට දැකගත හැකි වනු ඇත. ඉහත සජීවී ආදර්ශනය ක්‍රියාත්මක වන්නේද මෙම කේතයෙනි.

සුබ පැතුම්! 🎉 ඔබ දැන් state එකක් සහිත, පරිශීලකයාට ක්‍රියා කළ හැකි (interactive) React component එකක් සාර්ථකව නිර්මාණය කර ඇත.

⬅️ මුල් පිටුවට