Gebeurtenissen afhandelen in React- Een uitgebreide gids voor het afhandelen van gebeurtenissen in React .js

Gebeurtenissen spelen een cruciale rol bij het creëren van interactieve en dynamische gebruikersinterfaces in React. In deze zelfstudie zullen we onderzoeken hoe we gebeurtenissen kunnen afhandelen in React en effectief kunnen reageren op acties van gebruikers.

Gebeurtenisafhandeling in JSX

React biedt een synthetisch gebeurtenissysteem dat de native browsergebeurtenissen omhult en normaliseert in verschillende browsers. We kunnen gebeurtenishandlers rechtstreeks aan JSX-elementen koppelen met behulp van het onEventName kenmerk.

Voorbeeld:

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

Gebeurtenishandlers en gebeurtenisobjecten

Wanneer een gebeurtenis wordt geactiveerd, React wordt automatisch een gebeurtenisobject doorgegeven aan de gebeurtenishandlerfunctie. We hebben toegang tot dit object om aanvullende informatie over de gebeurtenis te krijgen, zoals doelelement, muiscoördinaten, enz.

Voorbeeld:

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

Bindende gebeurtenishandlers

Wanneer gebeurtenishandlers als rekwisieten worden doorgegeven, is het belangrijk om ze aan de componentinstantie te binden. Dit zorgt ervoor dat de juiste this context behouden blijft wanneer de gebeurtenis wordt geactiveerd.

Voorbeeld:

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

Voortplanting van gebeurtenissen en het voorkomen van standaardacties

React gebruikt een synthetisch gebeurtenissysteem dat automatisch de verspreiding van gebeurtenissen afhandelt. Om het standaard browsergedrag, zoals het indienen van formulieren of linknavigatie, te voorkomen, kunnen we de event.preventDefault() methode aanroepen.

Voorbeeld:

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

Door te begrijpen hoe gebeurtenissen in moeten worden afgehandeld React, kunt u interactieve en responsieve gebruikersinterfaces maken die naadloos reageren op gebruikersacties

Hier is een lijst met veelvoorkomende gebeurtenissen in React

1. onClick: Deze gebeurtenis vindt plaats wanneer op een element wordt geklikt.

Voorbeeld:

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

2. onChange: Deze gebeurtenis vindt plaats wanneer de waarde van een invoerelement(invoer, selecteren, tekstgebied) verandert.

Voorbeeld:

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

3. onSubmit: Deze gebeurtenis vindt plaats wanneer een formulier wordt ingediend. Voorbeeld:

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

4. onMouseEnter: Deze gebeurtenis vindt plaats wanneer de muisaanwijzer een element binnengaat.

Voorbeeld:

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

5. onMouseLeave: Deze gebeurtenis vindt plaats wanneer de muisaanwijzer een element verlaat.

Voorbeeld:

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

6. onKeyDown: Deze gebeurtenis vindt plaats wanneer een toets wordt ingedrukt.

Voorbeeld:

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

7. onKeyUp: Deze gebeurtenis vindt plaats wanneer een toets wordt losgelaten.

Voorbeeld:

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

8. onFocus: Deze gebeurtenis vindt plaats wanneer een element focus krijgt.

Voorbeeld:

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

9. onBlur: Deze gebeurtenis vindt plaats wanneer een element de focus verliest.

Voorbeeld:

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

10. onScroll: Deze gebeurtenis vindt plaats wanneer er door een element wordt gescrold.

Voorbeeld:

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

Dit zijn slechts enkele voorbeelden van veelvoorkomende gebeurtenissen in React. U kunt deze gebeurtenissen gebruiken of aangepaste gebeurtenissen maken volgens uw behoeften in uw React toepassing.