Χειρισμός συμβάντων σε React- Ένας ολοκληρωμένος οδηγός για το χειρισμό συμβάντων React .js

Τα συμβάντα διαδραματίζουν ζωτικό ρόλο στη δημιουργία διαδραστικών και δυναμικών διεπαφών χρήστη στο React. Σε αυτό το σεμινάριο, θα διερευνήσουμε πώς να χειριστούμε τα συμβάντα React και να ανταποκρινόμαστε αποτελεσματικά στις ενέργειες των χρηστών.

 

Χειρισμός συμβάντων στο JSX

React παρέχει ένα σύστημα συνθετικών συμβάντων που αναδιπλώνει τα εγγενή συμβάντα του προγράμματος περιήγησης και τα κανονικοποιεί σε διαφορετικά προγράμματα περιήγησης. Μπορούμε να επισυνάψουμε χειριστές συμβάντων απευθείας σε στοιχεία JSX χρησιμοποιώντας το onEventName χαρακτηριστικό.

Παράδειγμα:

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

 

Χειριστές συμβάντων και αντικείμενα συμβάντων

Όταν ενεργοποιείται ένα συμβάν, React μεταβιβάζει αυτόματα ένα αντικείμενο συμβάντος στη λειτουργία χειριστή συμβάντων. Μπορούμε να έχουμε πρόσβαση σε αυτό το αντικείμενο για να λάβουμε πρόσθετες πληροφορίες σχετικά με το συμβάν, όπως στοιχείο στόχο, συντεταγμένες ποντικιού κ.λπ.

Παράδειγμα:

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

 

Binding Event Handlers

Όταν μεταβιβάζετε τους χειριστές συμβάντων ως στηρίγματα, είναι σημαντικό να τους συνδέετε στην παρουσία του στοιχείου. this Αυτό διασφαλίζει ότι διατηρείται το σωστό περιβάλλον κατά την ενεργοποίηση του συμβάντος.

Παράδειγμα:

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

 

Διάδοση συμβάντων και αποτροπή προεπιλεγμένων ενεργειών

React χρησιμοποιεί ένα συνθετικό σύστημα συμβάντων που χειρίζεται αυτόματα τη διάδοση συμβάντων. Για να αποτρέψουμε την προεπιλεγμένη συμπεριφορά του προγράμματος περιήγησης, όπως η υποβολή φόρμας ή η πλοήγηση συνδέσμων, μπορούμε να καλέσουμε τη event.preventDefault() μέθοδο.

Παράδειγμα:

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

Κατανοώντας πώς να χειρίζεστε συμβάντα στο React, μπορείτε να δημιουργήσετε διαδραστικές και αποκριτικές διεπαφές χρήστη που ανταποκρίνονται απρόσκοπτα στις ενέργειες του χρήστη

 

Ακολουθεί μια λίστα με κοινά γεγονότα React

1. onClick: Αυτό το συμβάν εμφανίζεται όταν γίνεται κλικ σε ένα στοιχείο.

Παράδειγμα:

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

2. onChange: Αυτό το συμβάν συμβαίνει όταν αλλάζει η τιμή ενός στοιχείου εισόδου(εισαγωγή, επιλογή, περιοχή κειμένου).

Παράδειγμα:

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

3. onSubmit: Αυτό το συμβάν εμφανίζεται όταν υποβάλλεται μια φόρμα. Παράδειγμα:

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

4. onMouseEnter: Αυτό το συμβάν εμφανίζεται όταν ο δείκτης του ποντικιού εισάγει ένα στοιχείο.

Παράδειγμα:

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

5. onMouseLeave: Αυτό το συμβάν εμφανίζεται όταν ο δείκτης του ποντικιού φεύγει από ένα στοιχείο.

Παράδειγμα:

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

6. onKeyDown: Αυτό το συμβάν συμβαίνει όταν πατήσετε ένα πλήκτρο προς τα κάτω.

Παράδειγμα:

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

7. onKeyUp: Αυτό το συμβάν εμφανίζεται όταν απελευθερώνεται ένα κλειδί.

Παράδειγμα:

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

8. onFocus: Αυτό το συμβάν συμβαίνει όταν ένα στοιχείο λαμβάνει εστίαση.

Παράδειγμα:

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

9. onBlur: Αυτό το συμβάν συμβαίνει όταν ένα στοιχείο χάνει την εστίαση.

Παράδειγμα:

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

10. onScroll: Αυτό το συμβάν εμφανίζεται όταν γίνεται κύλιση ενός στοιχείου.

Παράδειγμα:

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

 

Αυτά είναι μόνο μερικά παραδείγματα κοινών γεγονότων στο React. Μπορείτε να χρησιμοποιήσετε αυτά τα συμβάντα ή να δημιουργήσετε προσαρμοσμένα συμβάντα σύμφωνα με τις ανάγκες σας στην React εφαρμογή σας.