Ereignisse spielen eine entscheidende Rolle bei der Erstellung interaktiver und dynamischer Benutzeroberflächen in React. In diesem Tutorial erfahren Sie, wie Sie mit Ereignissen umgehen React und effektiv auf Benutzeraktionen reagieren.
Ereignisbehandlung in JSX
React stellt ein synthetisches Ereignissystem bereit, das die nativen Browserereignisse umschließt und sie über verschiedene Browser hinweg normalisiert. Mit dem Attribut können wir Event-Handler direkt an JSX-Elemente anhängen onEventName.
Beispiel:
function handleClick() {
console.log("Button clicked!");
}
<button onClick={handleClick}>Click Me</button>
Event-Handler und Event-Objekte
Wenn ein Ereignis ausgelöst wird, React wird automatisch ein Ereignisobjekt an die Ereignishandlerfunktion übergeben. Wir können auf dieses Objekt zugreifen, um zusätzliche Informationen über das Ereignis zu erhalten, wie z. B. Zielelement, Mauskoordinaten usw.
Beispiel:
function handleMouseOver(event) {
console.log("Mouse coordinates:", event.clientX, event.clientY);
}
<div onMouseOver={handleMouseOver}>Hover over me</div>
Bindende Ereignishandler
Wenn Sie Ereignishandler als Requisiten übergeben, ist es wichtig, sie an die Komponenteninstanz zu binden. this Dadurch wird sichergestellt, dass beim Auslösen des Ereignisses der richtige Kontext beibehalten wird.
Beispiel:
class MyComponent extends React.Component {
handleClick() {
console.log("Button clicked!");
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
}
}
Ereignisweitergabe und Verhinderung von Standardaktionen
React verwendet ein synthetisches Ereignissystem, das die Ereignisweitergabe automatisch verwaltet. Um das Standardverhalten des Browsers zu verhindern, z. B. das Senden von Formularen oder die Linknavigation, können wir die event.preventDefault() Methode aufrufen.
Beispiel:
function handleSubmit(event) {
event.preventDefault();
console.log("Form submitted!");
}
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form>Wenn Sie verstehen, wie mit Ereignissen umgegangen wird React, können Sie interaktive und reaktionsfähige Benutzeroberflächen erstellen, die nahtlos auf Benutzeraktionen reagieren
Hier ist eine Liste häufiger Ereignisse in React
1. onClick: Dieses Ereignis tritt auf, wenn auf ein Element geklickt wird.
Beispiel:
<button onClick={handleClick}>Click Here</button> 2. onChange: Dieses Ereignis tritt auf, wenn sich der Wert eines Eingabeelements(input, select, textarea) ändert.
Beispiel:
<input type="text" onChange={handleChange} /> 3. onSubmit: Dieses Ereignis tritt auf, wenn ein Formular gesendet wird. Beispiel:
<form onSubmit={handleSubmit}>
<input type="text" />
<button type="submit">Submit</button>
</form> 4. onMouseEnter: Dieses Ereignis tritt auf, wenn der Mauszeiger ein Element betritt.
Beispiel:
<div onMouseEnter={handleMouseEnter}>Mouse Enter Here</div> 5. onMouseLeave: Dieses Ereignis tritt auf, wenn der Mauszeiger ein Element verlässt.
Beispiel:
<div onMouseLeave={handleMouseLeave}>Mouse Leave Here</div> 6. onKeyDown: Dieses Ereignis tritt auf, wenn eine Taste gedrückt wird.
Beispiel:
<input type="text" onKeyDown={handleKeyDown} /> 7. onKeyUp: Dieses Ereignis tritt auf, wenn eine Taste losgelassen wird.
Beispiel:
<input type="text" onKeyUp={handleKeyUp} /> 8. onFocus: Dieses Ereignis tritt auf, wenn ein Element den Fokus erhält.
Beispiel:
<input type="text" onFocus={handleFocus} /> 9. onBlur: Dieses Ereignis tritt auf, wenn ein Element den Fokus verliert.
Beispiel:
<input type="text" onBlur={handleBlur} /> 10. onScroll: Dieses Ereignis tritt auf, wenn ein Element gescrollt wird.
Beispiel:
<div onScroll={handleScroll}>Scrollable Content</div>
Dies sind nur einige Beispiele für häufige Ereignisse in React. Sie können diese Ereignisse verwenden oder benutzerdefinierte Ereignisse entsprechend Ihren Anforderungen in Ihrer React Anwendung erstellen.