onClick kisi element (button, div) par click hone par action trigger karta hai, jabki onChange inputs, textareas, ya selects me data change hone par update handle karta hai. Ye dono events React ke ReactJS ecosystem me UI interactivity aur state management ke pillar hain.Dosto, jab hum MERN Stack ya sirf front-end par kaam karte hain, toh sabse pehli cheez jo hume seekhni padti hai wo hai "User se interaction kaise lein". Aaj isi baare me baat karenge.
React me onClick aur onChange kya hai?
Simple shabdo me kahein toh, React me ye dono 'Event Handlers' hain. Jab user aapki website par kuch karta hai—jaise kisi button par click kiya ya form me apna naam type kiya—tab browser ek event generate karta hai. React in events ko listen karta hai aur hume batata hai ki "Bhai, user ne click kar diya hai, ab kya karna hai?".
onClick vs onChange: Architecture Flow
onClick event ka use kab karein?
onClick tab use hota hai jab aapko koi specific action trigger karna ho. Jaise:
- Button par click karke form submit karna.
- Modal open ya close karna.
- Kisi item ko delete ya edit karna.
Example dekhiye:
import React, { useState } from 'react';
function ClickExample() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
onChange event ka use kab karein?
onChange tab use hota hai jab aapko user ke input ko track karna ho, jise hum "Controlled Components" kehte hain. Jab bhi input field me koi character type hota hai, ye event trigger hota hai.
import React, { useState } from 'react';
function InputExample() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
};
return (
<div>
<input type="text" value={name} onChange={handleChange} placeholder="Naam likhein" />
<p>Aapka naam: {name}</p>
</div>
);
}
onClick vs onChange: Key Differences
| Feature | onClick | onChange |
|---|---|---|
| Trigger Type | Single Click | Typing/Selection change |
| Primary Element | Buttons, Divs, Icons | Inputs, Textarea, Select |
| State Role | Triggers state change | Synchronizes input value with state |
Common Errors aur Debugging
Bohot baar beginners se ek common error hota hai: onChange function me e.target.value ko access karte waqt undefined milna. Agar aapne function ko proper pass nahi kiya ya e (event object) ko capture nahi kiya, toh code break ho sakta hai. Hamesha check karein ki function definition correct hai.
Performance Tips
Jab aapke paas bohot saare inputs hon, toh har onChange par state update hone se poora component re-render hota hai. Isse bachne ke liye useCallback ka use karein aur unnecessary re-renders ko avoid karein.
टिप्पणियाँ
एक टिप्पणी भेजें