ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਡਾਇਨਾਮਿਕ ਯੂਜ਼ਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਵਿੱਚ ਇਵੈਂਟਸ ਅਹਿਮ ਭੂਮਿਕਾ ਨਿਭਾਉਂਦੇ ਹਨ 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 ਤੁਸੀਂ ਇਹਨਾਂ ਇਵੈਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਾਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਤੁਹਾਡੀਆਂ ਲੋੜਾਂ ਅਨੁਸਾਰ ਕਸਟਮ ਇਵੈਂਟ ਬਣਾ ਸਕਦੇ ਹੋ ।