Kushughulikia Matukio ndani React- Mwongozo wa kina wa kushughulikia tukio React .js

Matukio huwa na jukumu muhimu katika kuunda miingiliano na miingiliano ya watumiaji katika React. Katika somo hili, tutachunguza jinsi ya kushughulikia matukio React na kujibu vitendo vya mtumiaji kwa ufanisi.

 

Ushughulikiaji wa Tukio katika JSX

React hutoa mfumo wa tukio sanisi ambao hufunika matukio ya kivinjari asilia na kuyasawazisha katika vivinjari tofauti. Tunaweza kuambatisha vidhibiti tukio moja kwa moja kwenye vipengele vya JSX kwa kutumia onEventName sifa.

Mfano:

function handleClick() {  
  console.log("Button clicked!");  
}  
  
<button onClick={handleClick}>Click Me</button>

 

Vidhibiti vya Tukio na Vitu vya Tukio

Tukio linapoanzishwa, React hupitisha kipengee cha tukio kiotomatiki kwenye kitendakazi cha kidhibiti tukio. Tunaweza kufikia kipengee hiki ili kupata maelezo ya ziada kuhusu tukio, kama vile kipengele lengwa, viwianishi vya kipanya, n.k.

Mfano:

function handleMouseOver(event) {  
  console.log("Mouse coordinates:", event.clientX, event.clientY);  
}  
  
<div onMouseOver={handleMouseOver}>Hover over me</div>

 

Binding Washughulikiaji Tukio

Wakati wa kupitisha vidhibiti vya hafla kama vifaa, ni muhimu kuvifunga kwa mfano wa sehemu. Hii inahakikisha kwamba muktadha sahihi this unadumishwa tukio linapoanzishwa.

Mfano:

class MyComponent extends React.Component {  
  handleClick() {  
    console.log("Button clicked!");  
  }  
  
  render() {  
    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;  
  }  
}

 

Uenezi wa Tukio na Kuzuia Vitendo Chaguomsingi

React hutumia mfumo wa tukio sanisi ambao hushughulikia uenezaji wa tukio kiotomatiki. Ili kuzuia tabia ya kivinjari chaguo-msingi, kama vile uwasilishaji wa fomu au uelekezaji wa kiungo, tunaweza kuita event.preventDefault() mbinu.

Mfano:

function handleSubmit(event) {  
  event.preventDefault();  
  console.log("Form submitted!");  
}  
  
<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

Kwa kuelewa jinsi ya kushughulikia matukio katika React, unaweza kuunda miingiliano ya mtumiaji inayoingiliana na inayoitikia kwa urahisi vitendo vya mtumiaji.

 

Hapa kuna orodha ya matukio ya kawaida katika React

1. onClick: Tukio hili hutokea wakati kipengele kinapobofya.

Mfano:

<button onClick={handleClick}>Click Here</button>

2. onChange: Tukio hili hutokea wakati thamani ya kipengele cha pembejeo(ingizo, chagua, eneo la maandishi) inabadilika.

Mfano:

<input type="text" onChange={handleChange} />

3. onSubmit: Tukio hili hutokea wakati fomu inapowasilishwa. Mfano:

<form onSubmit={handleSubmit}>  
  <input type="text" />  
  <button type="submit">Submit</button>  
</form>

4. onMouseEnter: Tukio hili hutokea wakati kielekezi cha kipanya kinapoingia kwenye kipengele.

Mfano:

<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div>

5. onMouseLeave: Tukio hili hutokea wakati kielekezi cha kipanya kinapoacha kipengele.

Mfano:

<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div>

6. onKeyDown: Tukio hili hutokea wakati ufunguo unabonyeza chini.

Mfano:

<input type="text" onKeyDown={handleKeyDown} />

7. onKeyUp: Tukio hili hutokea wakati ufunguo umetolewa.

Mfano:

<input type="text" onKeyUp={handleKeyUp} />

8. onFocus: Tukio hili hutokea wakati kipengele kinapokea mwelekeo.

Mfano:

<input type="text" onFocus={handleFocus} />

9. onBlur: Tukio hili hutokea wakati kipengele kinapoteza mwelekeo.

Mfano:

<input type="text" onBlur={handleBlur} />

10. onScroll: Tukio hili hutokea wakati kipengele kinapozungushwa.

Mfano:

<div onScroll={handleScroll}>Scrollable Content</div>

 

Hii ni baadhi tu ya mifano ya matukio ya kawaida katika React. Unaweza kutumia matukio haya au kuunda matukio maalum kulingana na mahitaji yako katika React programu yako.