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.
Top comments (0)