Events की Typing
In this page:
function handler(event: React.ChangeEvent<HTMLInputElement>) {
// event.target.value
}Button Events को Type करना
React में एक button का onClick handler React.MouseEvent<HTMLButtonElement> typed है, जो React का अपना synthetic event wrapper है, plain DOM code में उपयोग होने वाला raw browser MouseEvent नहीं।
उदाहरण: Typing Button Events
import React from "react";
function Button(): React.JSX.Element {
const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
console.log("Clicked", event.currentTarget.tagName);
};
return <button onClick={handleClick}>Click</button>;
}
export default Button;Input Events को Type करना
एक input का onChange handler React.ChangeEvent<HTMLInputElement> typed है, जो आपको target को manually cast करने की ज़रूरत के बिना एक correctly typed event.target.value देता है।
उदाहरण: Typing Input Events
import React from "react";
function Input(): React.JSX.Element {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
console.log(event.target.value);
};
return <input onChange={handleChange} />;
}
export default Input;Form Events को Type करना
एक form का onSubmit handler React.FormEvent<HTMLFormElement> typed है, और इसपर event.preventDefault() call करना यह है कि आप React के default browser form-submission behavior को कैसे रोकते हैं।
उदाहरण: Typing Form Events
import React from "react";
function Form(): React.JSX.Element {
const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
event.preventDefault();
console.log("Submitted");
};
return <form onSubmit={handleSubmit}></form>;
}
export default Form;Keyboard Events को Type करना
एक keyboard handler React.KeyboardEvent<HTMLInputElement> typed है (या जिस भी element से यह attached हो), कौन सी key event trigger हुई check करने के लिए .key expose करते हुए, जैसे एक Enter keypress detect करना।
उदाहरण: Typing Keyboard Events
import React from "react";
function SearchBox(): React.JSX.Element {
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
if (event.key === "Enter") console.log("Enter pressed");
};
return <input onKeyDown={handleKeyDown} />;
}
export default SearchBox;Select Events को Type करना
एक select element का onChange handler React.ChangeEvent<HTMLSelectElement> typed है, जिसका event.target.value हमेशा एक string होता है भले ही selected option एक number represent करे, इसलिए आपको इसे अभी भी खुद convert करना चाहिए।
उदाहरण: Typing Select Events
import React from "react";
function SizePicker(): React.JSX.Element {
const handleChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
console.log(event.target.value);
};
return (
<select onChange={handleChange}>
<option value="1">Small</option>
</select>
);
}
export default SizePicker;React.MouseEvent<HTMLButtonElement>के बजाय nativeMouseEventtyped करना।- एक form के
onSubmitके लिएReact.ChangeEventउपयोग करना, जब submit eventsReact.FormEvent<HTMLFormElement>हैं। React.MouseEventपरevent.target.valueपढ़ना, जहांvalueमौजूद नहीं है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: