واقعات انٹرایکٹو اور متحرک یوزر انٹرفیس بنانے میں اہم کردار ادا کرتے ہیں React ۔ اس ٹیوٹوریل میں، ہم دریافت کریں گے کہ واقعات کو کیسے ہینڈل کیا جائے React اور صارف کی کارروائیوں کا مؤثر طریقے سے جواب دیا جائے۔
JSX میں ایونٹ ہینڈلنگ
React ایک مصنوعی ایونٹ سسٹم فراہم کرتا ہے جو مقامی براؤزر کے واقعات کو سمیٹتا ہے اور انہیں مختلف براؤزرز میں معمول بناتا ہے۔ ہم onEventName انتساب کا استعمال کرتے ہوئے ایونٹ ہینڈلرز کو براہ راست JSX عناصر سے منسلک کر سکتے ہیں۔
مثال:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
ایونٹ ہینڈلرز اور ایونٹ آبجیکٹ
جب کوئی ایونٹ ٹرگر ہوتا ہے، تو React خود بخود ایک ایونٹ آبجیکٹ کو ایونٹ ہینڈلر فنکشن میں منتقل کر دیتا ہے۔ ہم ایونٹ کے بارے میں اضافی معلومات حاصل کرنے کے لیے اس آبجیکٹ تک رسائی حاصل کر سکتے ہیں، جیسے کہ ہدف کا عنصر، ماؤس کوآرڈینیٹس وغیرہ۔
مثال:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
بائنڈنگ ایونٹ ہینڈلرز
ایونٹ ہینڈلرز کو پرپس کے طور پر پاس کرتے وقت، ان کو جزو مثال کے ساتھ باندھنا ضروری ہے۔ this یہ یقینی بناتا ہے کہ واقعہ کو متحرک ہونے پر صحیح سیاق و سباق کو برقرار رکھا جاتا ہے۔
مثال:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
واقعہ کی تشہیر اور پہلے سے طے شدہ اقدامات کو روکنا
React ایک مصنوعی ایونٹ سسٹم استعمال کرتا ہے جو خود بخود ایونٹ کے پھیلاؤ کو سنبھالتا ہے۔ پہلے سے طے شدہ براؤزر کے رویے کو روکنے کے لیے، جیسے کہ فارم جمع کرانے یا لنک نیویگیشن، ہم event.preventDefault() طریقہ کو کال کر سکتے ہیں۔
مثال:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>میں واقعات کو ہینڈل کرنے کے طریقے کو سمجھ کر React ، آپ انٹرایکٹو اور ریسپانسیو یوزر انٹرفیس بنا سکتے ہیں جو بغیر کسی رکاوٹ کے صارف کے اعمال کا جواب دیتے ہیں۔
یہاں میں عام واقعات کی ایک فہرست ہے۔ React
1. onClick: یہ واقعہ اس وقت ہوتا ہے جب کسی عنصر پر کلک کیا جاتا ہے۔
مثال:
<button onClick={handleClick}>Click Here</button> 2. onChange: یہ واقعہ اس وقت ہوتا ہے جب کسی ان پٹ عنصر(ان پٹ، سلیکٹ، ٹیکسٹیریا) کی قدر تبدیل ہوتی ہے۔
مثال:
<input type="text" onChange={handleChange} /> 3. onSubmit: یہ واقعہ اس وقت ہوتا ہے جب فارم جمع کیا جاتا ہے۔ مثال:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: یہ واقعہ اس وقت ہوتا ہے جب ماؤس پوائنٹر کسی عنصر میں داخل ہوتا ہے۔
مثال:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: یہ واقعہ اس وقت ہوتا ہے جب ماؤس پوائنٹر کسی عنصر کو چھوڑ دیتا ہے۔
مثال:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: یہ واقعہ اس وقت ہوتا ہے جب ایک کلید دبائی جاتی ہے۔
مثال:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: یہ واقعہ اس وقت ہوتا ہے جب ایک کلید جاری کی جاتی ہے۔
مثال:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: یہ واقعہ اس وقت ہوتا ہے جب کوئی عنصر توجہ حاصل کرتا ہے۔
مثال:
<input type="text" onFocus={handleFocus} /> 9. onBlur: یہ واقعہ اس وقت ہوتا ہے جب کوئی عنصر توجہ کھو دیتا ہے۔
مثال:
<input type="text" onBlur={handleBlur} /> 10. onScroll: یہ واقعہ اس وقت ہوتا ہے جب کسی عنصر کو سکرول کیا جاتا ہے۔
مثال:
<div onScroll={handleScroll}>Scrollable Content</div>
یہ میں عام واقعات کی صرف چند مثالیں ہیں React ۔ React آپ ان ایونٹس کو استعمال کر سکتے ہیں یا اپنی درخواست میں اپنی ضروریات کے مطابق حسب ضرورت ایونٹس بنا سکتے ہیں ۔