માં ઇન્ટરેક્ટિવ અને ડાયનેમિક યુઝર ઇન્ટરફેસ બનાવવામાં ઇવેન્ટ્સ મહત્વપૂર્ણ ભૂમિકા ભજવે છે 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.