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.