நிகழ்வுகளைக் கையாளுதல் React- நிகழ்வைக் கையாள்வதற்கான விரிவான வழிகாட்டி React .js

இல் ஊடாடும் மற்றும் மாறும் பயனர் இடைமுகங்களை உருவாக்குவதில் நிகழ்வுகள் முக்கிய பங்கு வகிக்கின்றன 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 விண்ணப்பத்தில் உங்கள் தேவைகளுக்கு ஏற்ப தனிப்பயன் நிகழ்வுகளை உருவாக்கலாம்.