Forem

Altencir Junior
Altencir Junior

Posted on

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)

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay