Event Handling in React
React, EVENTS, KO, camelCase, MEIN, HANDLE, KARTA, hai (onClick, onChange, onSubmit) — HTML, ATTRIBUTES, (onclick) SE, DIFFERENT. Event HANDLER, EK, FUNCTION, REFERENCE, HAI, JISE, JSX, ATTRIBUTE, MEIN, PASS, KIYA, JAATA, hai — {handleClick}, NA, KI, {handleClick()} (JO, IMMEDIATELY, CALL, KAR, DEGA).
event.preventDefault(), DEFAULT, BROWSER, BEHAVIOR, (jaise, FORM, SUBMIT, PAR, PAGE, RELOAD) ROKTA, hai. Event, DELEGATION, (SAARE, EVENTS, ROOT, PAR, ATTACH, HONA) React, INTERNALLY, HANDLE, KARTA, hai — PERFORMANCE, KE, LIYE.
function Form() {
function handleSubmit(e) {
e.preventDefault(); // page reload, ROKTA hai
console.log("Submitted!");
}
function handleClick(e) {
console.log("Clicked", e.target);
}
return (
<form onSubmit={handleSubmit}>
<button onClick={handleClick}>Click me</button>
</form>
);
}- React events, camelCase mein, HAIN (onClick, onChange) — HTML, se, DIFFERENT
- Event handler = FUNCTION reference, PASS karo, NA, ki, immediately, CALL karo
- event.preventDefault() = default, BROWSER, behavior, ROKTA, hai
onClick={() => handleDelete(item.id)}, EK, ARROW, FUNCTION, USE, KARKE, EXTRA, ARGUMENTS, PASS, KARTA, hai — DIRECTLY, onClick={handleDelete(item.id)}, LIKHNE, SE, FUNCTION, IMMEDIATELY, CALL, HO, JAAYEGA, (RENDER, KE, WAQT), JO, GALAT, hai.
{items.map(item => (
<button key={item.id} onClick={() => handleDelete(item.id)}>Delete</button>
))}onKeyDown, aur, onKeyUp, HANDLERS, mein, event.key, SE, PRESSED, KEY, PATA, CHALTI, hai — jaise, "Enter" key, PAR, FORM, SUBMIT, TRIGGER, KARNA, YA, "Escape" PAR, MODAL, CLOSE, KARNA.
<input onKeyDown={e => { if (e.key === "Enter") handleSubmit(); }} />