Manipulação de Eventos no React

Introdução

No desenvolvimento web, o tratamento de eventos é o processo de responder a ações do usuário como cliques, pressionamentos de tecla ou movimentos do mouse. O React oferece uma maneira simples e declarativa de lidar com esses eventos, tornando suas aplicações interativas.

O sistema de eventos do React é um wrapper em torno do sistema de eventos nativo do navegador. Os nomes dos eventos são escritos em camelCase, como onClick em vez de onclick. Você passa uma função como manipulador de eventos, em vez de uma string.

Neste laboratório, você aprenderá os fundamentos do tratamento de eventos no React. Você começará com um botão simples e adicionará progressivamente funcionalidades para lidar com eventos de clique, acessar dados de eventos e controlar o comportamento padrão do navegador.

Ao final deste laboratório, você será capaz de:

• Anexar um manipulador de eventos onClick a um botão.
• Definir uma função manipuladora dentro de um componente.
• Passar a função manipuladora para o atributo de evento corretamente.
• Acessar o objeto de evento para obter informações sobre o evento.
• Prevenir a ação padrão do navegador usando event.preventDefault().

Adicionar o atributo onClick ao elemento button

Nesta etapa, você começará configurando o ambiente de desenvolvimento e, em seguida, adicionará um atributo onClick a um elemento de botão. Este é o primeiro passo para tornar um elemento interativo no React.

Primeiro, vamos navegar até o diretório do projeto, instalar as dependências necessárias e iniciar o servidor de desenvolvimento.

Abra um terminal no WebIDE e execute os seguintes comandos um por um:

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

Após executar npm run dev, você verá uma saída indicando que o servidor de desenvolvimento está em execução. Agora você pode visualizar sua aplicação alternando para a aba Web 8080 na interface do LabEx. Você deverá ver um botão simples "Click me".

Agora, vamos adicionar o manipulador de eventos. Abra o arquivo src/App.jsx no explorador de arquivos no lado esquerdo do WebIDE.

Seu arquivo src/App.jsx atualmente se parece com isto:

function App() {
  return <button>Click me</button>;
}

export default App;

Para responder a um clique, você precisa adicionar o atributo onClick ao elemento <button>. No React, os atributos de evento são escritos em camelCase. Por enquanto, passaremos uma função de seta inline vazia para ele.

Modifique o elemento <button> em src/App.jsx conforme mostrado abaixo:

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Salve o arquivo. Embora clicar no botão ainda não faça nada visível, você anexou com sucesso um listener de eventos a ele.

Definir a função manipuladora dentro do componente

Nesta etapa, você definirá uma função dedicada dentro do seu componente para lidar com o evento de clique. Esta é uma prática comum que mantém seu JSX limpo e sua lógica organizada.

Em vez de escrever a lógica diretamente dentro do atributo onClick do JSX, é melhor definir uma função separada. Vamos criar uma função chamada handleClick.

No seu arquivo src/App.jsx, defina a função handleClick dentro do componente App, antes da instrução return. Por enquanto, esta função simplesmente registrará uma mensagem no console.

Atualize seu arquivo src/App.jsx com o seguinte código:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Neste ponto, você definiu a função handleClick, mas ela ainda não está conectada ao evento onClick do botão. Na próxima etapa, você aprenderá como passar essa função para o atributo onClick.

Passar o manipulador para onClick sem parênteses

Nesta etapa, você conectará a função handleClick que definiu ao evento onClick do botão. É muito importante passar a própria referência da função, e não o resultado da chamada da função.

Para usar sua função handleClick como manipulador de eventos, você precisa passá-la para o atributo onClick dentro de chaves {}.

Modifique o elemento <button> em src/App.jsx para passar handleClick para onClick:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Observe que estamos escrevendo onClick={handleClick}, não onClick={handleClick()}.

• onClick={handleClick} passa a própria função. O React chamará essa função quando o botão for clicado.
• onClick={handleClick()} chamaria a função imediatamente quando o componente fosse renderizado e passaria seu valor de retorno (que é undefined) para onClick. Este é um erro comum para iniciantes.

Agora, vamos testar.

1. Salve o arquivo src/App.jsx.
2. Vá para a aba Web 8080.
3. Abra o console do desenvolvedor do navegador. Você pode fazer isso clicando com o botão direito na página, selecionando "Inspecionar" (Inspect) e, em seguida, clicando na aba "Console".
4. Clique no botão "Click me".

Você deverá ver a mensagem "Button was clicked!" aparecer no console toda vez que clicar no botão.

Acessar o objeto de evento no parâmetro do manipulador

Nesta etapa, você aprenderá como acessar o objeto de evento que o React passa automaticamente para o seu manipulador de eventos. Este objeto contém informações úteis sobre a interação do usuário.

O React passa um objeto de "evento sintético" (synthetic event) para cada manipulador de eventos como seu primeiro argumento. Este objeto é um wrapper cross-browser em torno do evento nativo do navegador, fornecendo uma API consistente.

Para acessá-lo, você precisa adicionar um parâmetro à sua função handleClick. Convencionalmente, ele é nomeado event ou e. Vamos modificar a função para aceitar este parâmetro e registrá-lo no console.

Atualize seu arquivo src/App.jsx:

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Agora, salve o arquivo e volte para a aba Web 8080. Certifique-se de que seu console do desenvolvedor ainda esteja aberto. Ao clicar no botão, você não verá mais uma string simples. Em vez disso, verá um objeto SyntheticBaseEvent registrado no console.

Você pode expandir este objeto no console para inspecionar suas propriedades. Por exemplo, você pode encontrar:

• event.type: O tipo do evento (por exemplo, "click").
• event.target: O elemento DOM que disparou o evento (o <button>).

Este objeto de evento é poderoso e permite que você leia informações e controle o comportamento do evento.

Prevenir o padrão com event.preventDefault()

Nesta etapa, você aprenderá como prevenir o comportamento padrão do navegador associado a um evento. Este é um requisito comum, especialmente ao lidar com envios de formulário (form submissions).

Alguns eventos do navegador têm uma ação padrão. Por exemplo, clicar em um link navega para uma nova página, e clicar em um botão de envio dentro de um <form> envia o formulário, o que geralmente causa uma recarga da página.

Para demonstrar isso, vamos envolver nosso botão em um elemento <form>. Por padrão, clicar em um botão dentro de um formulário acionará o envio do formulário.

Atualize seu src/App.jsx para incluir uma tag <form>:

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Se você salvar isso e clicar no botão agora, notará que a página recarrega, e você pode ver brevemente o log do console antes que ele desapareça. Este é o comportamento padrão de envio do formulário.

Para prevenir isso, você pode chamar event.preventDefault() dentro do seu manipulador. Este método informa ao navegador para não executar sua ação padrão.

Modifique a função handleClick para chamar event.preventDefault():

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Salve o arquivo e tente novamente. Agora, ao clicar no botão na aba Web 8080, a página não recarregará. Você verá a mensagem "Form submission prevented!" registrada consistentemente no console. Você assumiu o controle do comportamento do evento com sucesso.

Resumo

Parabéns por completar o laboratório! Você aprendeu os conceitos fundamentais de manipulação de eventos (event handling) no React.

Neste laboratório, você praticou como:

• Usar o atributo onClick no JSX para escutar cliques do usuário.
• Definir funções manipuladoras de eventos (event handler functions) dentro dos seus componentes para manter seu código organizado.
• Passar corretamente uma referência de função para uma prop de manipulador de eventos (event handler prop), evitando a armadilha comum de chamar a função durante a renderização.
• Acessar o objeto de evento sintético (synthetic event object) que o React fornece, o qual contém informações valiosas sobre a interação do usuário.
• Usar event.preventDefault() para interromper a ação padrão do navegador, dando a você controle total sobre a experiência do usuário.

Essas habilidades são essenciais para construir interfaces de usuário interativas e dinâmicas com React. Você pode aplicar esses mesmos princípios para lidar com outros eventos como onChange para inputs, onMouseOver para efeitos de hover, e muitos outros.