Hantering av händelser i React- En omfattande guide till händelsehantering i React .js

Händelser spelar en avgörande roll för att skapa interaktiva och dynamiska användargränssnitt i React. I den här handledningen kommer vi att utforska hur man hanterar händelser i React och svarar på användaråtgärder effektivt.

Eventhantering i JSX

React tillhandahåller ett syntetiskt händelsesystem som omsluter de inbyggda webbläsarhändelserna och normaliserar dem över olika webbläsare. Vi kan koppla händelsehanterare direkt till JSX-element med hjälp av onEventName attributet.

Exempel:

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

Händelsehanterare och händelseobjekt

När en händelse utlöses React skickas ett händelseobjekt automatiskt till händelsehanterarens funktion. Vi kan komma åt detta objekt för att få ytterligare information om händelsen, såsom målelement, muskoordinater, etc.

Exempel:

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

Bindande händelsehanterare

När du skickar händelsehanterare som rekvisita är det viktigt att binda dem till komponentinstansen. Detta säkerställer att det korrekta this sammanhanget bibehålls när händelsen utlöses.

Exempel:

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

Händelsespridning och förhindrande av standardåtgärder

React använder ett syntetiskt händelsesystem som automatiskt hanterar händelsespridning. För att förhindra webbläsarens standardbeteende, såsom formulärinlämning eller länknavigering, kan vi anropa metoden event.preventDefault().

Exempel:

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

Genom att förstå hur du hanterar händelser i React kan du skapa interaktiva och responsiva användargränssnitt som sömlöst svarar på användaråtgärder

Här är en lista över vanliga evenemang i React

1. onClick: Denna händelse inträffar när ett element klickas.

Exempel:

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

2. onChange: Denna händelse inträffar när värdet på ett inmatningselement(input, select, textarea) ändras.

Exempel:

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

3. onSubmit: Denna händelse inträffar när ett formulär skickas. Exempel:

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

4. onMouseEnter: Denna händelse inträffar när muspekaren går in i ett element.

Exempel:

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

5. onMouseLeave: Denna händelse inträffar när muspekaren lämnar ett element.

Exempel:

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

6. onKeyDown: Denna händelse inträffar när en tangent trycks ned.

Exempel:

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

7. onKeyUp: Denna händelse inträffar när en tangent släpps.

Exempel:

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

8. onFocus: Denna händelse inträffar när ett element får fokus.

Exempel:

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

9. onBlur: Denna händelse inträffar när ett element tappar fokus.

Exempel:

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

10. onScroll: Denna händelse inträffar när ett element rullas.

Exempel:

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

Det här är bara några exempel på vanliga händelser i React. Du kan använda dessa evenemang eller skapa anpassade evenemang efter dina behov i din React applikation.