Tapahtumien käsittely React- Kattava opas tapahtumien käsittelyyn React .js

Tapahtumilla on keskeinen rooli vuorovaikutteisten ja dynaamisten käyttöliittymien luomisessa React. Tässä opetusohjelmassa tutkimme, kuinka käsitellä tapahtumia React ja vastata käyttäjien toimiin tehokkaasti.

Tapahtumankäsittely JSX:ssä

React tarjoaa synteettisen tapahtumajärjestelmän, joka käärii alkuperäiset selaintapahtumat ja normalisoi ne eri selaimissa. Voimme liittää tapahtumakäsittelijät suoraan JSX-elementteihin attribuutin avulla onEventName.

Esimerkki:

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

Tapahtumakäsittelijät ja tapahtumaobjektit

Kun tapahtuma käynnistetään, se React välittää tapahtumaobjektin automaattisesti tapahtumakäsittelijätoiminnolle. Voimme käyttää tätä objektia saadaksemme lisätietoja tapahtumasta, kuten kohdeelementin, hiiren koordinaatit jne.

Esimerkki:

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

Sitovat tapahtumakäsittelijät

Kun tapahtumakäsittelijöitä välitetään rekvisiittana, on tärkeää sitoa ne komponenttiesiintymään. Tämä varmistaa, että oikea this konteksti säilyy, kun tapahtuma käynnistyy.

Esimerkki:

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

Tapahtuman leviäminen ja oletustoimintojen estäminen

React käyttää synteettistä tapahtumajärjestelmää, joka käsittelee tapahtuman etenemisen automaattisesti. Jotta voimme estää selaimen oletuskäytön, kuten lomakkeiden lähettämisen tai linkkien navigoinnin, voimme kutsua menetelmää event.preventDefault().

Esimerkki:

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

Ymmärtämällä, miten tapahtumia käsitellään -sovelluksessa React, voit luoda interaktiivisia ja reagoivia käyttöliittymiä, jotka vastaavat saumattomasti käyttäjän toimiin.

Tässä on luettelo yleisistä tapahtumista React

1. onClick: Tämä tapahtuma tapahtuu, kun elementtiä napsautetaan.

Esimerkki:

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

2. onChange: Tämä tapahtuma tapahtuu, kun syöteelementin(input, select, textarea) arvo muuttuu.

Esimerkki:

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

3. onSubmit: Tämä tapahtuma tapahtuu, kun lomake lähetetään. Esimerkki:

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

4. onMouseEnter: Tämä tapahtuma tapahtuu, kun hiiren osoitin tulee elementtiin.

Esimerkki:

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

5. onMouseLeave: Tämä tapahtuma tapahtuu, kun hiiren osoitin poistuu elementistä.

Esimerkki:

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

6. onKeyDown: Tämä tapahtuma tapahtuu, kun näppäintä painetaan.

Esimerkki:

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

7. onKeyUp: Tämä tapahtuma tapahtuu, kun avain vapautetaan.

Esimerkki:

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

8. onFocus: Tämä tapahtuma tapahtuu, kun elementti saa tarkennuksen.

Esimerkki:

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

9. onBlur: Tämä tapahtuma tapahtuu, kun elementti menettää tarkennuksen.

Esimerkki:

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

10. onScroll: Tämä tapahtuma tapahtuu, kun elementtiä vieritetään.

Esimerkki:

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

Nämä ovat vain esimerkkejä yleisistä tapahtumista kohteessa React. Voit käyttää näitä tapahtumia tai luoda mukautettuja tapahtumia tarpeidesi mukaan sovelluksessasi React.