ReactJS Event Handling Sinhala Guide | සිංහලෙන් React Events

ReactJS Event Handling: අපේ Web Apps වලට පණ දෙමු! (A Comprehensive Sinhala Guide)

මචංලා, Web Applications හදනකොට User Interactions නැතුව බෑනේ! බොත්තමක් ක්ලික් කරන එක, මොනවා හරි දෙයක් type කරන එක, form එකක් submit කරන එක වගේ දේවල් තමයි අද දවසේ Web Apps වල පදනම. ReactJS කියන්නේ මේ වගේ interactions පහසුවෙන් handle කරන්න පුළුවන් Powerful Library එකක්. හැබැයි, React වල Event Handling කියන්නේ පොඩ්ඩක් වෙනස් කතාවක්. සාමාන්‍ය JavaScript වල අපි කරන විදියටම නෙවෙයි React වලදී මේ දේවල් වෙන්නේ.

ඔයා React Developer කෙනෙක් නම්, Event Handling ගැන හරියටම දැනගෙන ඉන්න එක අත්‍යවශ්‍යයි. මේ Tutorial එකෙන් අපි ReactJS වල Event Handling කියන්නේ මොකක්ද, ඒක කොහොමද සාමාන්‍ය JavaScript වලට වඩා වෙනස් වෙන්නේ, Synthetic Events කියන්නේ මොනවද, ඒ වගේම onClick, onChange, onSubmit වගේ වැදගත් Event Handlers කොහොමද use කරන්නේ කියලා අදාල code examples එක්කම ගැඹුරින් සාකච්ඡා කරනවා. ඒ වගේම this Binding වගේ ටිකක් සංකීර්ණ තැන් වගේම Best Practices ගැනත් අපි බලමු.

එහෙනම්, අපි පටන් ගමු!

1. Event Handling කියන්නේ මොකක්ද?

සරලවම කිව්වොත්, Event Handling කියන්නේ User කෙනෙක් අපේ Web Application එකත් එක්ක interact කරනකොට (ගැටෙනකොට) සිද්ධ වෙන දේවල් (Events) හසුරුවන ක්‍රියාවලියට. උදාහරණයක් විදියට, Mouse එක click කරන එක (click event), Keyboard එකෙන් මොනවා හරි type කරන එක (keyup, keydown, keypress events), Form එකක් submit කරන එක (submit event) වගේ දේවල් තමයි events කියලා කියන්නේ.

අපි Event Handling භාවිතා කරන්නේ මේ වගේ Events වලට ප්‍රතිචාර දක්වන්න. User කෙනෙක් Button එකක් click කරාම, Alert එකක් පෙන්නන්න, Data Load කරන්න, Input Field එකක වටිනාකම වෙනස් කරන්න වගේ දේවල් වලට අපි Event Handlers පාවිච්චි කරනවා.

සාමාන්‍ය (Native) JavaScript වලදී අපි Event Handlers add කරන්නේ addEventListener වගේ methods හරහා. ඒත් React වලදී මේ දේවල් වෙන්නේ ටිකක් වෙනස් විදියකට. React තමන්ගේම Event System එකක් භාවිතා කරනවා.

2. React Synthetic Events - ටිකක් වෙනස් කතාවක්

React වල Event Handling ගැන කතා කරනකොට, Synthetic Events කියන concept එක තේරුම් ගන්න එක අත්‍යවශ්‍යයි. React, Browser එකේ Native Events කෙලින්ම use කරන්නේ නැහැ. ඒ වෙනුවට, React තමන්ගේම Event System එකක් හදලා තියෙනවා, ඒක තමයි Synthetic Events කියලා හඳුන්වන්නේ.

Synthetic Events වල වාසි මොනවද?

• Cross-Browser Compatibility: එකම code base එකකින්, විවිධ browsers වලට අදාල වෙනස්කම් ගැන කරදර වෙන්නේ නැතුව Events handle කරන්න පුළුවන්. React මේ වෙනස්කම් අපිට නොදැනීම adjust කරනවා.
• Performance: React Event Pooling කියන ක්‍රමවේදයක් භාවිතා කරනවා. ඒ කියන්නේ, Events ගොඩක් ඇති වුනාම, React එකම Event Object එක නැවත නැවත භාවිතා කරනවා. මේක නිසා Garbage Collection එක අඩු වෙලා, Performance එක වැඩි වෙනවා. (නමුත් මේ pooling එක නිසා, Event Handlers ඇතුළේ Asynchronously event object එකට access කරන්න ටිකක් පරිස්සම් වෙන්න ඕනේ. අවශ්‍ය නම්, event.persist() භාවිතා කරන්න පුළුවන්, නමුත් බොහෝ විට ඒක අවශ්‍ය වෙන්නේ නැහැ.)
• Consistency: සියලුම Events වලට එක හා සමාන Interface එකක් ලැබෙනවා. ඒ කියන්නේ, event.target, event.preventDefault() වගේ Properties සහ Methods හැම Event Type එකකටම පොදුයි.

ඔයාට Event Handler එකක් ඇතුලේ event object එකට access කරන්න පුළුවන්. මේ event object එක SyntheticEvent එකක්. මේක Native Browser Event එකක Wrapper එකක් විදියට හිතන්න පුළුවන්.

වැදගත් Synthetic Event Properties:

• event.target: Event එක trigger වුණු DOM Element එක.
• event.currentTarget: Event Handler එක attach කරලා තියෙන Element එක. (Event Bubbling වලදී මේ දෙක වෙනස් වෙන්න පුළුවන්.)
• event.preventDefault(): Browser එකේ Default Behaviour එක නවත්වනවා. (උදා: Form Submit වෙන එක, Link එකක් click කරාම අලුත් Page එකකට යන එක නවත්වනවා).
• event.stopPropagation(): Event එක Bubbling වෙන එක නවත්වනවා. (Parent Elements වලට Event එක යෑම නවත්වනවා).

3. Practical Implementation - පොඩ්ඩක් කෝඩ් කරමු!

දැන් අපි බලමු මේ Event Handlers, React Components ඇතුලේ කොහොමද පාවිච්චි කරන්නේ කියලා. React වලදී, Event Handler එකක් JSX Element එකකට pass කරන්නේ Camel Case (onClick, onChange) attribute එකක් විදියට.

3.1. onClick - බොත්තම් වලට පණ දෙමු!

onClick කියන්නේ Buttons, Divs, Spans වගේ Elements Click කරනකොට activate වෙන Event Handler එක. මේක තමයි ඔයා වැඩිපුරම භාවිතා කරන Event Handler එක වෙන්නේ.

සරල උදාහරණයක්:

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    alert(`බොත්තම ක්ලික් කළා ${count + 1} පාරක්!`); // බොත්තම ක්ලික් කළා X පාරක්!
  };

  return (
    <div>
      <p>වර්තමාන ගණන: {count}</p>
      <button onClick={handleClick}>
        මාව ක්ලික් කරන්න!
      </button>
    </div>
  );
}

export default ClickCounter;

මේ උදාහරණයේදී, අපි handleClick කියන function එක onClick attribute එකට pass කරලා තියෙනවා. Button එක click කරාම මේ function එක run වෙනවා. count එක Update වෙනවා, ඒ වගේම Alert එකකුත් පෙන්නනවා.

3.2. onChange - Input Fields පාලනය කරමු!

onChange කියන්නේ Input Fields (<input>, <textarea>, <select>) වල වටිනාකම වෙනස් වෙනකොට activate වෙන Event Handler එක. React වලදී Inputs පාලනය කරන්නේ Controlled Components විදියට. ඒ කියන්නේ, Input Field එකේ වටිනාකම React State එකක් මගින් පාලනය කරනවා.

උදාහරණයක්:

import React, { useState } from 'react';

function NameInput() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <label htmlFor="nameInput">ඔබේ නම ඇතුලත් කරන්න:</label>
      <input
        type="text"
        id="nameInput"
        value={name}
        onChange={handleChange}
        placeholder="ඔබේ නම..."
      />
      <p>ඔබ ඇතුලත් කළ නම: <strong>{name}</strong></p>
    </div>
  );
}

export default NameInput;

මෙතැනදී, handleChange function එකට event object එක ලැබෙනවා. අපි event.target.value භාවිතා කරලා Input Field එකේ වත්මන් වටිනාකම අරගෙන, ඒක name State එකට set කරනවා. මේ නිසා, Input Field එකේ වටිනාකම හැමවිටම State එකත් එක්ක Sync වෙනවා.

3.3. onSubmit - Forms Submit කරන හැටි!

onSubmit කියන්නේ Form එකක් Submit කරනකොට activate වෙන Event Handler එක. Form Submit කරනකොට, Browser එකේ Default Behaviour එක තමයි Page එක Refresh කරන එක. React වලදී මේක නවත්වන්න event.preventDefault() භාවිතා කරන්න වෙනවා.

උදාහරණයක්:

import React, { useState } from 'react';

function ContactForm() {
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // Browser එකේ default refresh එක නවත්වනවා
    console.log('Form Submitted!');
    console.log('Email:', email);
    console.log('Message:', message);

    // සාමාන්‍යයෙන් මෙතනදී API call එකක් වගේ දෙයක් කරනවා
    alert(`ඔබේ දත්ත යවන ලදී: ${email}`);

    // Form එක clear කරන්න
    setEmail('');
    setMessage('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="email">ඊමේල්:</label>
        <input
          type="email"
          id="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="message">පණිවිඩය:</label>
        <textarea
          id="message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
          rows="4"
        ></textarea>
      </div>
      <button type="submit">යොමු කරන්න</button>
    </form>
  );
}

export default ContactForm;

handleSubmit function එක ඇතුළේ අපි මුලින්ම event.preventDefault() කියලා දාලා තියෙනවා. මේක ඉතාම වැදගත්. එහෙම නැතුව Form එක Submit කරොත් Page එක Refresh වෙලා State එකේ තියෙන Data නැති වෙලා යනවා. ඉන්පස්සේ අපිට අවශ්‍ය Logic එක (උදා: API call එකක්) මේ function එක ඇතුළේ ලියන්න පුළුවන්.

4. this Binding - ටිකක් සංකීර්ණ තැනක් (Class Components වලදී)

දැන් කාලේ බොහෝ දෙනෙක් Functional Components සහ Hooks භාවිතා කරන නිසා මේ ගැටලුව එතරම් ප්‍රබල නැහැ. හැබැයි, ඔයා Class Components එක්ක වැඩ කරනවා නම්, this Binding කියන එක ටිකක් වදයක් වෙන්න පුළුවන්. JavaScript වලදී Function එකක් Call කරන විදිය අනුව, this කියන Keyword එකේ Value එක වෙනස් වෙනවා.

Class Component එකක Event Handler Method එකක් define කරාම, ඒක සාමාන්‍ය JavaScript Function එකක් විදියට Call වෙනකොට this එක undefined වෙන්න පුළුවන්. ඒ කියන්නේ, Class එකේ Properties (උදා: this.state, this.props) Access කරන්න බැරි වෙනවා.

this Binding විසඳන ක්‍රම:

මේ ගැටලුවට විසඳුම් කිහිපයක් තියෙනවා:

4.1. Constructor එකේ Bind කරන එක (සාම්ප්‍රදායික ක්‍රමය):

import React, { Component } from 'react';

class ClassicCounter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // මෙතනදී this binding කරනවා
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // මෙතනදී this.state කියන්නේ ClassicCounter component එකට
    this.setState(prevState => ({ count: prevState.count + 1 }));
    console.log('Count:', this.state.count); // මේක async නිසා, කලින් value එක පෙන්වයි
  }

  render() {
    return (
      <div>
        <p>වර්තමාන ගණන (Class): {this.state.count}</p>
        <button onClick={this.handleClick}>
          ක්ලික් කරන්න (Class)
        </button>
      </div>
    );
  }
}

export default ClassicCounter;

මේ ක්‍රමය ටිකක් verbose (විශේෂිත) වුනත්, Class Components වලදී this binding කරන්න භාවිතා කරන සාම්ප්‍රදායික ක්‍රමය.

4.2. Arrow Functions Class Properties විදියට භාවිතා කරන එක (Recommended):

මේක Class Components වලදී this binding කරන්න තියෙන පහසුම සහ Recommended ක්‍රමය. Arrow Functions වලට තමන්ගේම this context එකක් නැති නිසා, ඒගොල්ලෝ Parent Scope එකේ this එක inherit කරනවා. ඒ කියන්නේ Class එකේ this එක Event Handler එකටත් ලැබෙනවා.

import React, { Component } from 'react';

class ModernCounter extends Component {
  state = { count: 0 }; // Class Property syntax

  handleClick = () => { // Arrow function as a class property
    this.setState(prevState => ({ count: prevState.count + 1 }));
    console.log('Count:', this.state.count);
  };

  render() {
    return (
      <div>
        <p>වර්තමාන ගණන (Modern Class): {this.state.count}</p>
        <button onClick={this.handleClick}>
          ක්ලික් කරන්න (Modern Class)
        </button>
      </div>
    );
  }
}

export default ModernCounter;

මේක තමයි Class Components එක්ක වැඩ කරනකොට Event Handlers define කරන්න තියෙන හොඳම ක්‍රමය.

4.3. JSX එක ඇතුළේ Arrow Function එකක් භාවිතා කරන එක:

සමහර අවස්ථාවලදී ඔයාට කෙලින්ම JSX එක ඇතුළේ Arrow Function එකක් ලියන්න පුළුවන්. හැබැයි, මේක හැමවිටම හොඳම විසඳුම නෙවෙයි. මොකද, Component එක Render වෙන හැම පාරටම අලුත් Function Instance එකක් හැදෙන නිසා Performance එකට බලපෑමක් වෙන්න පුළුවන් (විශේෂයෙන්ම Child Components වලට Prop එකක් විදියට pass කරනකොට).

import React from 'react';

function SimpleButton() {
  const message = "ආයුබෝවන් React!";

  return (
    <button onClick={() => alert(message)}>
      Alert කරන්න!
    </button>
  );
}

export default SimpleButton;

සරල, එක් වරක් පමණක් භාවිතා කරන Event Handlers වලට මේ ක්‍රමය හොඳයි. හැබැයි Complex Logic තියෙන තැන් වලට this binding කරලා හෝ Class Properties විදියට Arrow Functions use කරන එක වඩා හොඳයි.

5. Best Practices and Common Issues - වැරදි අඩුකරගෙන, වැඩේ නියමෙට කරමු!

දැන් අපි බලමු Event Handling කරනකොට මතක තියාගන්න ඕනේ Best Practices කිහිපයක් සහ පොදු වැරදි මොනවද කියලා:

• event.preventDefault() අමතක කරන්න එපා: Form Submissions වලදී Page Refresh වෙන එක නවත්වන්න මේක අනිවාර්යයෙන්ම භාවිතා කරන්න.
• Event Handlers වලට Argument Pass කිරීම:
  • සමහර වෙලාවට Event Handler එකට අමතර Argument (පරාමිති) pass කරන්න අවශ්‍ය වෙනවා. ඒ වෙලාවට Arrow Function එකක් භාවිතා කරන්න පුළුවන්:
  • කෙලින්ම onClick={handleDelete(id)} කියලා දුන්නොත්, Component එක Render වෙනකොටම Function එක Call වෙනවා මිසක් Button එක Click කරාම නෙවෙයි. ඒ නිසා පරිස්සම් වෙන්න.
• Event Bubbling සහ stopPropagation():
  • Events, DOM එකේ Child Elements වල ඉඳන් Parent Elements දක්වා Bubble වෙනවා (ඉහළට යනවා). සමහර වෙලාවට මේක නවත්වන්න අවශ්‍ය වෙන්න පුළුවන්. ඒ වෙලාවට event.stopPropagation() භාවිතා කරන්න.
• Event Handlers කෙටියෙන් තියාගන්න: Event Handler එක ඇතුළේ Complex Logic ගොඩක් ලියනවා වෙනුවට, ඒ Logic එක වෙනම Helper Function එකකට Extract කරන්න. මේක Code එක කියවන්න සහ Maintain කරන්න පහසු කරනවා.
• State Updates Asynchronous වීම: setState (Class Components) හෝ setXYZ (Functional Components) Asynchronous වෙන නිසා, State Update කරපු ගමන්ම අලුත් Value එකට access කරන්න බැරි වෙන්න පුළුවන්. ඒකට Callback Functions හෝ useEffect (Functional Components) භාවිතා කරන්න.

   const handleParentClick = () => console.log('Parent Clicked');
   const handleChildClick = (event) => {
     event.stopPropagation(); // Parent එකට click event එක යෑම නවත්වනවා
     console.log('Child Clicked');
   };

   return (
     <div onClick={handleParentClick}>
       <button onClick={handleChildClick}>Child Button</button>
     </div>
   );
            

   <button onClick={() => handleDelete(id)}>මකන්න</button>

නිගමනය (Conclusion)

ReactJS වල Event Handling කියන්නේ ඔයාට අනිවාර්යයෙන්ම දැනගෙන ඉන්න ඕන Basic Concept එකක්. මේ Tutorial එකෙන් අපි Event Handling කියන්නේ මොකක්ද, React වල Synthetic Events කොහොමද වැඩ කරන්නේ, ඒ වගේම onClick, onChange, onSubmit වගේ ප්‍රධාන Event Handlers කොහොමද භාවිතා කරන්නේ කියලා පැහැදිලිව ඉගෙන ගත්තා. ඒ වගේම Class Components වලදී this Binding ගැටලුවට විසඳුම් සහ Best Practices ගැනත් සාකච්ඡා කළා.

දැන් ඔයාට පුළුවන් මේ දැනුම ඔයාගේ React Projects වලට යොදවලා, Interactive සහ User Friendly Applications හදන්න. මතක තියාගන්න, Practice කරන එක තමයි වැදගත්ම දේ. මේ concepts ඔයාගේ ඊළඟ Project එකේ Apply කරලා බලන්න!

ඔයාගේ අත්දැකීම්, ප්‍රශ්න හෝ අදහස් පහළින් Comment කරන්න. අපි එකතු වෙලා මේ දැනුම තවත් දියුණු කරගමු!