Forem

Altencir Junior
Altencir Junior

Posted on

1

Os Eventos no React

Quando estamos em algum site ou aplicativo, é normal a existência de botões, submissão de formulários ou até caixas de texto. Os exemplos citados, são todos chamados de Events(ou Eventos), no React. Quando um evento é acionado, o React invoca uma função de callback que é responsável por lidar com esse evento.

Além dos tipos citados anteriormente como eventos de mouse e teclado, é possível criar eventos personalizados usando a API de eventos do React. Vejamos um exemplo simples de um Evento de Clique:

import React from 'react';

function handleClick() {
  alert('Botão clicado!');
}

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

export default Button;
Enter fullscreen mode Exit fullscreen mode

No código acima, nós criamos uma função que guarda uma caixa de alerta indicando que o botão foi clicado. Em seguida criamos outra função chamada Button, onde retorna um botão com callback de click linkada a função handleclick. Após isso, exportamos o Button.

Nós também podemos criar um evento personalizado, como no exemplo a seguir:

import React from 'react';

function MyComponent() {
  function handleClick() {
    const event = new CustomEvent('myEvent', { detail: { foo: 'bar' } });
    window.dispatchEvent(event);
  }

  return (
    <button onClick={handleClick}>
      Disparar evento personalizado
    </button>
  );
}

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

Nesse exemplo, quando o usuário clicar no botão, a função handleClick criará um evento personalizado chamado myEvent, com uma propriedade detail contendo o objeto { foo: 'bar' }. Em seguida, a função window.dispatchEvent é usada para disparar esse evento.

Com base nisso, vimos como os eventos são uma parte essencial do desenvolvimento de aplicativos React. Eles permitem que os desenvolvedores capturem ações do usuário e lidem com elas em tempo real. Além disso, o React oferece suporte a uma ampla variedade de eventos e permite a criação de eventos personalizados. Com esses recursos, os desenvolvedores podem criar aplicativos interativos e responsivos que oferecem uma experiência de usuário mais agradável.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay