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;

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;

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.