Obravnavanje dogodkov v React – obsežen vodnik za obravnavo dogodkov v React .js

Dogodki igrajo ključno vlogo pri ustvarjanju interaktivnih in dinamičnih uporabniških vmesnikov v React. V tej vadnici bomo raziskali, kako obravnavati dogodke React in se učinkovito odzvati na dejanja uporabnikov.

 

Obravnava dogodkov v JSX

React zagotavlja sintetični sistem dogodkov, ki ovije izvorne dogodke brskalnika in jih normalizira v različnih brskalnikih. Z atributom lahko elementom JSX neposredno pripnemo obdelovalce dogodkov onEventName.

primer:

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

 

Obdelovalci dogodkov in objekti dogodkov

Ko se sproži dogodek, React samodejno posreduje objekt dogodka funkciji obdelovalca dogodkov. Do tega objekta lahko dostopamo, da pridobimo dodatne informacije o dogodku, kot so ciljni element, koordinate miške itd.

primer:

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

 

Obdelovalci zavezujočih dogodkov

Pri posredovanju obdelovalcev dogodkov kot rekvizitov je pomembno, da jih povežete s primerkom komponente. this To zagotavlja, da se ob sprožitvi dogodka ohrani pravilen kontekst.

primer:

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

 

Razširjanje dogodkov in preprečevanje privzetih dejanj

React uporablja sintetični sistem dogodkov, ki samodejno obravnava širjenje dogodkov. Če želite preprečiti privzeto vedenje brskalnika, kot je oddaja obrazca ali navigacija po povezavi, lahko pokličemo metodo event.preventDefault().

primer:

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

Če razumete, kako obravnavati dogodke v React, lahko ustvarite interaktivne in odzivne uporabniške vmesnike, ki se neopazno odzivajo na dejanja uporabnikov

 

Tukaj je seznam pogostih dogodkov v React

1. onClick: Ta dogodek se zgodi, ko se klikne element.

primer:

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

2. onChange: Ta dogodek se zgodi, ko se spremeni vrednost vhodnega elementa(input, select, textarea).

primer:

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

3. onSubmit: Ta dogodek se zgodi, ko je oddan obrazec. primer:

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

4. onMouseEnter: Ta dogodek se zgodi, ko kazalec miške vstopi v element.

primer:

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

5. onMouseLeave: Ta dogodek se zgodi, ko kazalec miške zapusti element.

primer:

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

6. onKeyDown: Ta dogodek se zgodi, ko pritisnete tipko.

primer:

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

7. onKeyUp: Ta dogodek se zgodi, ko je tipka izpuščena.

primer:

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

8. onFocus: Ta dogodek se zgodi, ko element prejme fokus.

primer:

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

9. onBlur: Ta dogodek se zgodi, ko element izgubi fokus.

primer:

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

10. onScroll: Ta dogodek se zgodi, ko se element premika.

primer:

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

 

To je le nekaj primerov običajnih dogodkov v React. Te dogodke lahko uporabite ali ustvarite dogodke po meri v svoji React aplikaciji glede na vaše potrebe.