close

Manejo de eventos en React: una guía completa para el manejo de eventos en React .js

Los eventos juegan un papel vital en la creación de interfaces de usuario interactivas y dinámicas en React. En este tutorial, exploraremos cómo manejar eventos React y responder a las acciones del usuario de manera efectiva.

 

Manejo de eventos en JSX

React proporciona un sistema de eventos sintético que envuelve los eventos del navegador nativo y los normaliza en diferentes navegadores. Podemos adjuntar controladores de eventos directamente a elementos JSX usando el onEventName atributo.

Ejemplo:

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

 

Controladores de eventos y objetos de eventos

Cuando se activa un evento, React pasa automáticamente un objeto de evento a la función del controlador de eventos. Podemos acceder a este objeto para obtener información adicional sobre el evento, como el elemento objetivo, las coordenadas del mouse, etc.

Ejemplo:

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

 

Controladores de eventos vinculantes

Al pasar controladores de eventos como accesorios, es importante vincularlos a la instancia del componente. Esto asegura que this se mantenga el contexto correcto cuando se activa el evento.

Ejemplo:

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

 

Propagación de eventos y prevención de acciones predeterminadas

React utiliza un sistema de eventos sintético que maneja automáticamente la propagación de eventos. Para evitar el comportamiento predeterminado del navegador, como el envío de formularios o la navegación por enlaces, podemos llamar al event.preventDefault() método.

Ejemplo:

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

Al comprender cómo manejar eventos en React, puede crear interfaces de usuario interactivas y receptivas que respondan sin problemas a las acciones del usuario.

 

Aquí hay una lista de eventos comunes en React

1. onClick: Este evento ocurre cuando se hace clic en un elemento.

Ejemplo:

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

2. onChange: Este evento ocurre cuando cambia el valor de un elemento de entrada(entrada, selección, área de texto).

Ejemplo:

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

3. onSubmit: Este evento ocurre cuando se envía un formulario. Ejemplo:

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

4. onMouseEnter: Este evento ocurre cuando el puntero del mouse ingresa a un elemento.

Ejemplo:

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

5. onMouseLeave: Este evento ocurre cuando el puntero del mouse deja un elemento.

Ejemplo:

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

6. onKeyDown: Este evento ocurre cuando se presiona una tecla.

Ejemplo:

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

7. onKeyUp: Este evento ocurre cuando se suelta una tecla.

Ejemplo:

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

8. onFocus: Este evento ocurre cuando un elemento recibe el foco.

Ejemplo:

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

9. onBlur: Este evento ocurre cuando un elemento pierde el foco.

Ejemplo:

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

10. onScroll: Este evento ocurre cuando se desplaza un elemento.

Ejemplo:

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

 

Estos son solo algunos ejemplos de eventos comunes en React. Puede utilizar estos eventos o crear eventos personalizados según sus necesidades en su React aplicación.