Håndtering av hendelser i React- En omfattende guide til hendelseshåndtering i React .js

Arrangementer spiller en viktig rolle i å skape interaktive og dynamiske brukergrensesnitt i React. I denne opplæringen vil vi utforske hvordan du håndterer hendelser i React og reagerer på brukerhandlinger effektivt.

 

Hendelseshåndtering i JSX

React gir et syntetisk hendelsessystem som omslutter de opprinnelige nettleserhendelsene og normaliserer dem på tvers av forskjellige nettlesere. Vi kan knytte hendelsesbehandlere direkte til JSX-elementer ved å bruke attributtet onEventName.

Eksempel:

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

 

Hendelsesbehandlere og hendelsesobjekter

Når en hendelse utløses, React sender et hendelsesobjekt automatisk til hendelsesbehandlerfunksjonen. Vi kan få tilgang til dette objektet for å få tilleggsinformasjon om hendelsen, som målelement, musekoordinater, etc.

Eksempel:

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

 

Bindende hendelsesbehandlere

Når du sender hendelsesbehandlere som rekvisitter, er det viktig å binde dem til komponentforekomsten. Dette sikrer at riktig this kontekst opprettholdes når hendelsen utløses.

Eksempel:

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

 

Hendelsesutbredelse og forhindring av standardhandlinger

React bruker et syntetisk hendelsessystem som automatisk håndterer hendelsesforplantning. For å forhindre standard nettleseroppførsel, for eksempel skjemainnsending eller lenkenavigering, kan vi kalle metoden event.preventDefault().

Eksempel:

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

Ved å forstå hvordan du håndterer hendelser i React, kan du lage interaktive og responsive brukergrensesnitt som sømløst reagerer på brukerhandlinger

 

Her er en liste over vanlige arrangementer i React

1. onClick: Denne hendelsen oppstår når et element klikkes.

Eksempel:

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

2. onChange: Denne hendelsen oppstår når verdien til et inngangselement(input, select, textarea) endres.

Eksempel:

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

3. onSubmit: Denne hendelsen inntreffer når et skjema sendes inn. Eksempel:

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

4. onMouseEnter: Denne hendelsen oppstår når musepekeren går inn i et element.

Eksempel:

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

5. onMouseLeave: Denne hendelsen oppstår når musepekeren forlater et element.

Eksempel:

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

6. onKeyDown: Denne hendelsen oppstår når en tast trykkes ned.

Eksempel:

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

7. onKeyUp: Denne hendelsen oppstår når en tast slippes.

Eksempel:

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

8. onFocus: Denne hendelsen oppstår når et element får fokus.

Eksempel:

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

9. onBlur: Denne hendelsen oppstår når et element mister fokus.

Eksempel:

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

10. onScroll: Denne hendelsen oppstår når et element rulles.

Eksempel:

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

 

Dette er bare noen eksempler på vanlige hendelser i React. Du kan bruke disse hendelsene eller lage tilpassede hendelser i henhold til dine behov i React applikasjonen din.