Įvykių tvarkymas React – išsamus įvykių tvarkymo vadovas React .js

Įvykiai atlieka labai svarbų vaidmenį kuriant interaktyvias ir dinamiškas vartotojo sąsajas React. Šioje mokymo programoje išnagrinėsime, kaip React efektyviai tvarkyti įvykius ir reaguoti į vartotojo veiksmus.

 

Įvykių tvarkymas JSX

React suteikia sintetinę įvykių sistemą, kuri apvynioja vietinius naršyklės įvykius ir normalizuoja juos įvairiose naršyklėse. Įvykių tvarkykles galime prijungti tiesiai prie JSX elementų naudodami onEventName atributą.

Pavyzdys:

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

 

Įvykių tvarkytojai ir įvykių objektai

Kai įvykis suaktyvinamas, React automatiškai perduoda įvykio objektą įvykių tvarkyklės funkcijai. Prie šio objekto galime patekti norėdami gauti papildomos informacijos apie įvykį, pvz., tikslinį elementą, pelės koordinates ir kt.

Pavyzdys:

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

 

Įpareigojančios įvykių tvarkyklės

Perduodant įvykių tvarkykles kaip rekvizitus, svarbu juos susieti su komponento egzemplioriumi. Taip užtikrinamas tinkamas this kontekstas, kai įvykis suaktyvinamas.

Pavyzdys:

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

 

Įvykių plitimas ir numatytųjų veiksmų prevencija

React naudoja sintetinę įvykių sistemą, kuri automatiškai tvarko įvykių plitimą. Norėdami išvengti numatytosios naršyklės veikimo, pvz., formos pateikimo ar nuorodų naršymo, galime iškviesti metodą event.preventDefault().

Pavyzdys:

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

Suprasdami, kaip tvarkyti įvykius programoje React, galite sukurti interaktyvias ir reaguojančias vartotojo sąsajas, kurios sklandžiai reaguoja į vartotojo veiksmus

 

Čia yra įprastų įvykių sąrašas React

1. onClick: Šis įvykis įvyksta spustelėjus elementą.

Pavyzdys:

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

2. onChange: Šis įvykis įvyksta, kai pasikeičia įvesties elemento reikšmė(įvestis, pasirinkimas, teksto sritis).

Pavyzdys:

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

3. onSubmit: Šis įvykis įvyksta, kai pateikiama forma. Pavyzdys:

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

4. onMouseEnter: Šis įvykis įvyksta, kai pelės žymeklis patenka į elementą.

Pavyzdys:

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

5. onMouseLeave: Šis įvykis įvyksta, kai pelės žymeklis palieka elementą.

Pavyzdys:

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

6. onKeyDown: Šis įvykis įvyksta, kai paspaudžiamas klavišas.

Pavyzdys:

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

7. onKeyUp: Šis įvykis įvyksta atleidus klavišą.

Pavyzdys:

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

8. onFocus: Šis įvykis įvyksta, kai elementas sufokusuojamas.

Pavyzdys:

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

9. onBlur: Šis įvykis įvyksta, kai elementas praranda fokusą.

Pavyzdys:

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

10. onScroll: Šis įvykis įvyksta, kai elementas slenkamas.

Pavyzdys:

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

 

Tai tik keli įprastų įvykių pavyzdžiai React. Galite naudoti šiuos įvykius arba kurti pasirinktinius įvykius pagal savo poreikius programoje React.