Håndtering af begivenheder i React- En omfattende guide til begivenhedshåndtering i React .js

Begivenheder spiller en afgørende rolle i at skabe interaktive og dynamiske brugergrænseflader i React. I denne selvstudie vil vi undersøge, hvordan man håndterer hændelser i React og reagerer effektivt på brugerhandlinger.

 

Hændelseshåndtering i JSX

React leverer et syntetisk hændelsessystem, der omslutter de native browserhændelser og normaliserer dem på tværs af forskellige browsere. Vi kan knytte hændelseshandlere direkte til JSX-elementer ved hjælp af onEventName attributten.

Eksempel:

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

 

Hændelseshåndtere og hændelsesobjekter

Når en hændelse udløses, React overføres automatisk et hændelsesobjekt til hændelseshåndteringsfunktionen. Vi kan få adgang til dette objekt for at få yderligere information om begivenheden, såsom målelement, musekoordinater osv.

Eksempel:

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

 

Bindende Event Handlers

Når du sender hændelseshandlere som rekvisitter, er det vigtigt at binde dem til komponentinstansen. Dette sikrer, at den korrekte this kontekst opretholdes, når hændelsen udløses.

Eksempel:

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

 

Hændelsesudbredelse og forebyggelse af standardhandlinger

React bruger et syntetisk hændelsessystem, der automatisk håndterer hændelsesformidling. For at forhindre standardbrowseradfærd, såsom formularindsendelse eller linknavigation, kan vi kalde event.preventDefault() metoden.

Eksempel:

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

Ved at forstå, hvordan du håndterer hændelser i React, kan du skabe interaktive og responsive brugergrænseflader, der problemfrit reagerer på brugerhandlinger

 

Her er en liste over almindelige begivenheder i React

1. onClick: Denne hændelse opstår, når der klikkes på et element.

Eksempel:

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

2. onChange: Denne hændelse opstår, når værdien af ​​et inputelement(input, vælg, tekstområde) ændres.

Eksempel:

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

3. onSubmit: Denne hændelse opstår, når en formular indsendes. Eksempel:

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

4. onMouseEnter: Denne hændelse opstår, når musemarkøren går ind i et element.

Eksempel:

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

5. onMouseLeave: Denne hændelse opstår, når musemarkøren forlader et element.

Eksempel:

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

6. onKeyDown: Denne hændelse opstår, når en tast trykkes ned.

Eksempel:

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

7. onKeyUp: Denne hændelse opstår, når en tast slippes.

Eksempel:

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

8. onFocus: Denne hændelse opstår, når et element modtager fokus.

Eksempel:

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

9. onBlur: Denne hændelse opstår, når et element mister fokus.

Eksempel:

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

10. onScroll: Denne hændelse opstår, når et element rulles.

Eksempel:

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

 

Dette er blot nogle eksempler på almindelige begivenheder i React. Du kan bruge disse begivenheder eller oprette tilpassede begivenheder efter dine behov i din React applikation.