Module 5 – Events හැසිරවීම (Handling Events)

අපගේ යෙදුම දැන් dynamic data පෙන්වයි. ඊළඟට, පරිශීලකයාට එම data සමඟ අන්තර්ක්‍රියා කිරීමට සලස්වමු. ඒ සඳහා අපි events භාවිතා කරමු.

50% සම්පූර්ණයි

React හි Events

React events, සාමාන්‍ය HTML DOM events වලට ඉතා සමාන ය, නමුත් ඒවා ලිවීමේදී කුඩා වෙනස්කම් කිහිපයක් ඇත:

  • React events ලියනු ලබන්නේ **camelCase** ක්‍රමයටයි. (උදා: HTML වල onclick, React වල onClick).
  • React වලදී, event handler එකක් ලෙස string එකක් වෙනුවට, ඔබ **function එකක්** ලබා දිය යුතුය.

බහුලව භාවිතා වන events කිහිපයක් නම් onClick, onChange (input fields සඳහා), සහ onSubmit (forms සඳහා) වේ. අපි මෙම කොටසේදී onClick event එක කෙරෙහි අවධානය යොමු කරමු.

`onClick` Event එක එකතු කිරීම

අපි දැන් අපගේ counter app එකට button එකක් එකතු කර, එය click කළ විට යමක් සිදු වීමට සලස්වමු.

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

පළමුව, button එක click කළ විට ක්‍රියාත්මක වන function එකක් සාදා ගනිමු. මෙම function එක, component එක තුළම නිර්මාණය කළ හැක.

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

  function handleAdd() {
    console.log("Button was clicked!");
  }

  return (
    // ... JSX
  );
}
Button එකට `onClick` එකතු කිරීම

දැන්, අපගේ JSX තුළ button එකක් සාදා, එහි onClick prop එකට අප සෑදූ handleAdd function එක ලබා දෙමු.

<button onClick={handleAdd}>Add 1</button>
**වැදගත්:** මෙහිදී onClick={handleAdd} ලෙස function එකේ නම පමණක් ලබා දෙන බව සලකන්න. onClick={handleAdd()} ලෙස වරහන් යෙදුවහොත්, component එක render වන විටම එම function එක ක්‍රියාත්මක වේ. අපට අවශ්‍ය එය button එක click කළ විට පමණක් ක්‍රියාත්මක වීමටයි.
State එක Update කිරීම

අවසාන වශයෙන්, handleAdd function එක තුළ, `console.log` එක වෙනුවට අපගේ state එක update කරන setCount function එක call කරමු. නව අගය ලෙස, පවතින `count` අගයට 1ක් එකතු කරමු.

function handleAdd() {
  setCount(count + 1);
}

දැන්, ඔබ button එක click කරන සෑම විටම, `handleAdd` function එක ක්‍රියාත්මක වී, `setCount` මගින් `count` state එකේ අගය වැඩි කරයි. React විසින් මෙම state වෙනස හඳුනාගෙන, UI එකේ පෙන්වන අගය ස්වයංක්‍රීයව යාවත්කාලීන කරයි.

Module 5: කුඩා කාර්යය (Mini Task)

අපි දැන් පෙර module එකේදී සෑදූ counter එකට, count අගය 1කින් වැඩි කරන button එකක් එකතු කරමු.

  1. ඔබගේ src/App.jsx file එක විවෘත කරන්න.
  2. `App` function එක තුළ, `count` අගය 1කින් වැඩි කිරීමට `handleAdd` නමින් function එකක් සාදන්න.
  3. ඔබගේ JSX කේතය තුළ, count අගය පෙන්වන `

    ` ටැගයට පහළින්, "+ Add" ලෙස ලේබල් කළ `

  4. එම button එකේ onClick event එකට, ඔබ සෑදූ `handleAdd` function එක ලබා දෙන්න.

සම්පූර්ණ `App.jsx` file එක මෙසේ දිස්විය යුතුය:

import { useState } from 'react';
import Header from './components/Header.jsx';
import './App.css';

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

  // Event handler function to increase the count
  function handleAdd() {
    setCount(count + 1);
  }

  return (
    <>
      <Header />
      <main style={{ padding: '20px', textAlign: 'center' }}>
        <h2>The Counter App</h2>
        <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>
          Count: {count}
        </p>
        <button 
          onClick={handleAdd} 
          style={{ padding: '10px 20px', fontSize: '1rem' }}
        >
          + Add
        </button>
      </main>
    </>
  );
}

export default App;

File එක save කර browser එකේ "+ Add" button එක click කර බලන්න. Count අගය වැඩි වෙනවාද?

පෙර කොටස ඊළඟ කොටස: Counter App