Obsługa zdarzeń w React — obszerny przewodnik po obsłudze zdarzeń w React .js

Zdarzenia odgrywają istotną rolę w tworzeniu interaktywnych i dynamicznych interfejsów użytkownika w programie React. W tym samouczku przyjrzymy się, jak efektywnie obsługiwać zdarzenia React i reagować na działania użytkowników.

 

Obsługa zdarzeń w JSX

React zapewnia syntetyczny system zdarzeń, który opakowuje natywne zdarzenia przeglądarki i normalizuje je w różnych przeglądarkach. Możemy dołączyć obsługę zdarzeń bezpośrednio do elementów JSX za pomocą onEventName atrybutu.

Przykład:

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

 

Programy obsługi zdarzeń i obiekty zdarzeń

Po wyzwoleniu zdarzenia React automatycznie przekazuje obiekt zdarzenia do funkcji obsługi zdarzeń. Możemy uzyskać dostęp do tego obiektu, aby uzyskać dodatkowe informacje o zdarzeniu, takie jak element docelowy, współrzędne myszy itp.

Przykład:

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

 

Wiążące procedury obsługi zdarzeń

Podczas przekazywania procedur obsługi zdarzeń jako rekwizytów ważne jest, aby powiązać je z instancją komponentu. Zapewnia to zachowanie poprawnego this kontekstu po wyzwoleniu zdarzenia.

Przykład:

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

 

Propagacja zdarzeń i zapobieganie domyślnym akcjom

React wykorzystuje syntetyczny system zdarzeń, który automatycznie obsługuje propagację zdarzeń. Aby zapobiec domyślnemu zachowaniu przeglądarki, takiemu jak przesyłanie formularza lub nawigacja po łączu, możemy wywołać event.preventDefault() metodę.

Przykład:

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

Wiedząc, jak obsługiwać zdarzenia w programie React, możesz tworzyć interaktywne i responsywne interfejsy użytkownika, które płynnie reagują na działania użytkownika

 

Oto lista typowych wydarzeń w React

1. onClick: To zdarzenie występuje po kliknięciu elementu.

Przykład:

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

2. onChange: To zdarzenie ma miejsce, gdy zmienia się wartość elementu wejściowego(input, select, textarea).

Przykład:

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

3. onSubmit: To zdarzenie ma miejsce podczas przesyłania formularza. Przykład:

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

4. onMouseEnter: To zdarzenie ma miejsce, gdy wskaźnik myszy znajdzie się w elemencie.

Przykład:

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

5. onMouseLeave: To zdarzenie ma miejsce, gdy wskaźnik myszy opuści element.

Przykład:

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

6. onKeyDown: To zdarzenie występuje, gdy klawisz jest wciśnięty.

Przykład:

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

7. onKeyUp: To zdarzenie ma miejsce po zwolnieniu klawisza.

Przykład:

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

8. onFocus: To zdarzenie ma miejsce, gdy element otrzymuje fokus.

Przykład:

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

9. onBlur: To zdarzenie ma miejsce, gdy element traci ostrość.

Przykład:

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

10. onScroll: To zdarzenie występuje, gdy element jest przewijany.

Przykład:

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

 

To tylko niektóre przykłady typowych wydarzeń w programie React. Możesz użyć tych zdarzeń lub utworzyć niestandardowe zdarzenia zgodnie z własnymi potrzebami w swojej React aplikacji.