Voltar

O que são os Event Handlers em React?

Entendendo melhor os eventos realizados no seu código React

09 de abril de 2023 às 15:17

O que é um Event Handler?

Event handlers em React são funções que são atribuídas a eventos do navegador (como "click", "change" ou "submit") e executam uma ação específica quando o evento ocorre. Essas funções são chamadas sempre que o evento correspondente é acionado pelo usuário.

Em termos de programação em React, os event handlers são definidos como propriedades dos componentes React e geralmente são passados como atributos para elementos de interface do usuário, como botões ou formulários. Quando o usuário interage com esses elementos, o React chama a função de event handler correspondente para atualizar o estado do componente ou executar outras ações necessárias.

Por exemplo, um event handler pode ser usado para atualizar o estado de um componente React com base em uma entrada do usuário em um formulário. Quando o usuário preenche o formulário e clica no botão "submit", o event handler correspondente é acionado para coletar os dados do formulário e atualizar o estado do componente com esses dados.

Os event handlers são uma parte importante da programação em React porque permitem que os desenvolvedores criem interfaces de usuário interativas e responsivas que respondem às ações do usuário.

Como é utilizado um Event Handler

Suponha que você tenha um componente React que exiba um botão que, quando clicado, exiba um alerta com uma mensagem. Você pode criar um event handler para o evento "click" do botão da seguinte forma:

import React from "react";

function MeuComponente() {

  function handleClick() {
    alert("O botão foi clicado!");
  }

  return (
    <button onClick={handleClick}>
      Clique aqui!
    </button>
  );
}

export default MeuComponente;

Nesse exemplo, a função handleClick é definida para exibir uma mensagem de alerta quando o botão é clicado. Em seguida, a função é passada como uma propriedade onClick para o elemento button, para que seja acionada quando o botão é clicado.

Observe que o nome do evento "click" em React é escrito em camelCase como onClick. Além disso, o evento é atribuído diretamente ao elemento button usando o atributo onClick. Quando o usuário clica no botão, o React chama a função handleClick para exibir a mensagem de alerta.

Lendo props nos Event Handlers

Como os event handlers são declarados dentro de um componente, eles têm acesso às props do componente. Aqui está um botão que, quando clicado, mostra um alerta com a prop message:

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

Passando event handlers como props

Em componentes funcionais do React, é possível passar event handlers como props para outros componentes. Isso é útil quando você precisa que um componente filho execute uma ação específica em resposta a um evento, mas quer definir essa ação no componente pai.

Para passar um event handler como prop, você precisa definir a função do event handler no componente pai e, em seguida, passá-la como uma prop para o componente filho. O componente filho pode então chamar a função do event handler quando necessário, geralmente em resposta a um evento como clique do mouse, tecla pressionada, entre outros.

Ao passar event handlers como props, os componentes podem ser mais facilmente reutilizados em diferentes contextos, pois a lógica de manipulação de eventos é definida no componente pai e pode ser personalizada conforme necessário. Além disso, é possível nomear os event handler props de forma a tornar seu código mais legível.

Por exemplo, em vez de passar um event handler sem nome, como <Filho onClick={handleClick} />, você pode nomear a prop para torná-la mais descritiva, como <Filho onBotaoClicado={handleClick} />. Isso torna o código mais legível e ajuda a documentar o que o componente está fazendo.

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}

Event Propagation

Event propagation, também conhecido como bubbling e capturing, é o processo pelo qual eventos em React se propagam de elementos pai para elementos filhos ou vice-versa, dependendo do modo de propagação.

No React, a propagação de eventos ocorre naturalmente de acordo com a estrutura do componente na árvore do DOM. Quando um evento é disparado em um elemento filho, ele se propaga primeiro para o elemento pai e, em seguida, para todos os outros elementos pai, se houver.

Para controlar o modo de propagação do evento, o React usa o método stopPropagation() para interromper a propagação do evento e preventDefault() para impedir o comportamento padrão do evento. Esses métodos podem ser usados dentro do manipulador de eventos para controlar como o evento é tratado.

Além disso, o React também oferece a opção de usar o conceito de captura (capturing) e de bubbling para definir a direção da propagação do evento. Você pode definir o modo de propagação usando a propriedade capture no evento. Por exemplo, onClickCapture define o modo de captura e onClick define o modo de bubbling.

Em resumo, o evento propagation em React segue a mesma lógica do HTML e JavaScript. No entanto, o React oferece métodos para controlar a propagação do evento e também permite a definição da direção de propagação por meio da propriedade capture.

usando stopPropagation()

function Button({ onClick, children }) {
  return (
    <button onClick={e => {
      e.stopPropagation();
      onClick();
    }}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div className="Toolbar" onClick={() => {
      alert('You clicked on the toolbar!');
    }}>
      <Button onClick={() => alert('Playing!')}>
        Play Movie
      </Button>
      <Button onClick={() => alert('Uploading!')}>
        Upload Image
      </Button>
    </div>
  );
}

usando preventDefault()

export default function Signup() {
  return (
    <form onSubmit={e => {
      e.preventDefault();
      alert('Submitting!');
    }}>
      <input />
      <button>Send</button>
    </form>
  );
}

Lista de Event Handlers

Alguns dos event handlers mais comuns em React:

onClick: manipulador de eventos para cliques do mouse
onChange: manipulador de eventos para mudanças em um elemento de formulário (como <input> ou <select>)
onSubmit: manipulador de eventos para envio de formulário
onKeyDown: manipulador de eventos para pressionamento de tecla
onKeyUp: manipulador de eventos para liberação de tecla
onFocus: manipulador de eventos para foco no elemento
onBlur: manipulador de eventos para perda de foco do elemento
onLoad: manipulador de eventos para quando um elemento (como uma imagem) é carregado
onError: manipulador de eventos para quando um elemento (como uma imagem) falha ao carregar

Alguns event handlers menos conhecidos em React:

onScroll: manipulador de eventos para quando um elemento é rolado
onMouseDown: manipulador de eventos para quando o botão do mouse é pressionado em um elemento
onMouseUp: manipulador de eventos para quando o botão do mouse é liberado em um elemento
onMouseEnter: manipulador de eventos para quando o cursor do mouse entra em um elemento
onMouseLeave: manipulador de eventos para quando o cursor do mouse sai de um elemento
onMouseMove: manipulador de eventos para quando o cursor do mouse é movido em um elemento
onContextMenu: manipulador de eventos para quando o botão direito do mouse é clicado em um elemento
onDoubleClick: manipulador de eventos para quando um elemento é clicado duas vezes rapidamente
onDragStart: manipulador de eventos para quando um elemento começa a ser arrastado
onDragEnd: manipulador de eventos para quando um elemento é solto após ser arrastado

Extra : Event Handler onPlay e onPause

Os Event Handlers onPlay e onPause são usados para lidar com a reprodução e pausa de mídia, como áudio e vídeo, em elementos <audio> e <video> em React.

O manipulador de evento onPlay é acionado quando o elemento de mídia é iniciado ou quando o usuário retoma a reprodução após pausar. Por outro lado, o manipulador de evento onPause é acionado quando o usuário pausa a reprodução da mídia.

Aqui está um exemplo de como você pode usar esses manipuladores de eventos em React:

import React, { useState } from 'react';

function MediaPlayer(props) {
  const [isPlaying, setIsPlaying] = useState(false);

  const handlePlay = () => {
    setIsPlaying(true);
  }

  const handlePause = () => {
    setIsPlaying(false);
  }

  return (
    <div>
      <h2>{props.title}</h2>
      <audio
        onPlay={handlePlay}
        onPause={handlePause}
        src={props.src}
      />
      <p>{isPlaying ? 'Playing' : 'Paused'}</p>
    </div>
  );
}

export default MediaPlayer;

Neste exemplo, handlePlay e handlePause são usados como manipuladores de eventos para onPlay e onPause, respectivamente, para atualizar o estado do componente de acordo com a reprodução ou pausa da mídia. Quando o elemento de áudio é reproduzido, handlePlay define o estado isPlaying como true, enquanto handlePause define o estado como false quando o elemento é pausado.

Observe que, para usar esses manipuladores de eventos em elementos de mídia, você deve adicionar uma fonte (src) para o elemento de áudio ou vídeo. Neste exemplo, a fonte é passada como uma propriedade chamada src.