లో ఇంటరాక్టివ్ మరియు డైనమిక్ యూజర్ ఇంటర్‌ఫేస్‌లను సృష్టించడంలో ఈవెంట్‌లు కీలక పాత్ర పోషిస్తాయి React. ఈ ట్యుటోరియల్‌లో, మేము ఈవెంట్‌లను ఎలా నిర్వహించాలో React మరియు వినియోగదారు చర్యలకు సమర్థవంతంగా ప్రతిస్పందించడం ఎలాగో విశ్లేషిస్తాము.
JSXలో ఈవెంట్ హ్యాండ్లింగ్
React స్థానిక బ్రౌజర్ ఈవెంట్‌లను చుట్టి, వివిధ బ్రౌజర్‌లలో వాటిని సాధారణీకరించే సింథటిక్ ఈవెంట్ సిస్టమ్‌ను అందిస్తుంది. మేము లక్షణాన్ని ఉపయోగించి నేరుగా JSX మూలకాలకు ఈవెంట్ హ్యాండ్లర్‌లను జోడించవచ్చు onEventName.
ఉదాహరణ:
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 అప్లికేషన్‌లో మీ అవసరాలకు అనుగుణంగా అనుకూల ఈవెంట్‌లను సృష్టించవచ్చు.