Managing Events like onClick and onChange in React

 Event Handling ee React.js: Maareynta Dhacdooyinka sida onClick iyo onChange

Maareynta dhacdooyinka (event handling) waa mid ka mid ah dhinacyada muhiimka ah ee React.js, gaar ahaan marka aad la falgaleyso isticmaaleyaasha boggaaga. React waxay leedahay nidaam casri ah oo fududeynaya maaraynta dhacdooyinka sida onClick, onChange, iyo kuwa kale. Maqaalkan, waxaan ku baran doonnaa sida loo isticmaalo event handling ee React.js, iyada oo aan xoogga saarno tusaalayaal ku saabsan onClick iyo onChange.

 onClick and onChange in React

1. Waa maxay Event Handling?

Event handling waa farsamo kuu oggolaanaysa inaad la falgasho dhacdooyinka ay isticmaaleha ku sameeyaan bogga, sida riixista batoonka (button), gelinta xogta (input), ama doorashada xog (selection). React wuxuu kaaga sahlayaa inaad dhacdooyinkan maareyso adigoo adeegsanaya props-yada ku xiran components-ka sida onClick iyo onChange.

2. Maareynta onClick Event-ka

Event-ka onClick waxaa loo isticmaalaa in la fuliyo fal celin marka isticmaaleha uu riixo element-ka sida button ama link. Waxaad si sahlan ugu dari kartaa onClick event component-kaaga React.

Tusaale: Maareynta onClick Event-ka

javascript

import React from 'react';

function App() {
  function handleClick() {
    alert('Badhanka waa la riixay!');
  }

  return (
    <div>
      <button onClick={handleClick}>Riix Badhanka</button>
    </div>
  );
}

export default App;

Sharaxaad:

• Waxaan halkan ku abuurnay function la yiraahdo handleClick, kaas oo soo bandhigaya fariin deg deg ah (alert) markii button-ka la riixo.
• Waxaa jiro button leh prop la yiraahdo onClick, oo markasta oo button-ka la riixo ku yeeraya handleClick function.

3. Maareynta onChange Event-ka

onChange waa event ka dhacaya marka xogta ku jirta element input ama select ay isbedesho. Waa mid waxtar leh marka isticmaaluhu uu wax ku qorayo input ama uu dooranayo wax ka mid ah fursado kala duwan.

Tusaale: Maareynta onChange Event-ka

javascript

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Waxaad qortay: {inputValue}</p>
    </div>
  );
}

export default App;

Sharaxaad:

• Waxaan isticmaalnay useState si aan ugu kaydino qiimaha ku jira input-ka (inputValue).
• Markasta oo isticmaaluhu wax ku qoro input-ka, handleChange function-ka ayaa la yeedhayaa, kaasi oo cusbooneysiinaya inputValue.
• Qiimaha input-ka waxaa lagu soo bandhigayaa gudaha <p> tag.

4. Isticmaalka Arrow Functions Event Handling-ka

React.js sidoo kale waxay kuu oggolaaneysaa inaad isticmaasho arrow functions si aad si toos ah ugu maamusho events-ka. Tani waxay kaa caawin kartaa inaad sameyso koodh kooban.

Tusaale: Isticmaalka Arrow Function

javascript

import React, { useState } from 'react';

function App() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>Tirinta: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Kordhi Tirinta</button>
    </div>
  );
}

export default App;

Sharaxaad:

• Waxaan isticmaalnay arrow function gudaha onClick prop si aan toos ugu cusbooneysiino counter-ka marka button-ka la riixo.
• Markasta oo la riixo button-ka, counter-ka wuxuu kordhayaa hal.

5. Event Object

Marka event la yeedho, waxaa jira element loo yaqaan event object oo soo gudbiya xog ku saabsan dhacdadaas. Waxaad ka heli kartaa xog muhiim ah event object-ka sida event.target, taas oo kuu sheegi karta element-ka uu isticmaaluhu ku sameeyay dhacdada.

Tusaale: Isticmaalka event object

javascript

function handleClick(event) {
  console.log(event.target); // Waxay soo bandhigeysaa button-ka la riixay
}

6. Maaraynta Dhacdooyinka Kale

React waxay taageertaa noocyo badan oo dhacdooyin ah marka laga soo tago onClick iyo onChange, sida:

• onSubmit: Marka foomka la gudbiyo.
• onMouseEnter iyo onMouseLeave: Marka mouse-ka lagu dul keeno ama laga dhaqaajiyo element.
• onKeyDown iyo onKeyUp: Marka isticmaaluhu furo ama sii daayo furaha keyboard-ka.

Gunaanad

Event handling waa farsamo muhiim ah oo kaa caawinaysa inaad la falgasho isticmaaleyaasha boggaaga React.js. Iyada oo laga faa'iideysanayo dhacdooyinka sida onClick iyo onChange, waxaad abuuri kartaa web apps aad u horumarsan oo jawaabo degdeg ah bixiya. Isticmaalka arrow functions iyo event objects waxay kugu kordhinayaan awoodda aad u leedahay inaad maamusho dhacdooyinka si waxtar leh.