React - Versão 19.2

12 - Eventos

Nesta aula, vamos aprender a trabalhar com eventos no React. Eventos permitem capturar ações do usuário, como cliques, mudanças de valor e interações com o mouse.

Principais eventos no React

Evento	Descrição
onClick	Disparado ao clicar em um elemento
onChange	Disparado quando o valor de um campo é alterado
onMouseOver	Disparado quando o mouse passa sobre o elemento
onMouseOut	Disparado quando o mouse sai do elemento
onKeyDown	Disparado ao pressionar uma tecla
onSubmit	Disparado ao enviar um formulário

---

1. Evento onClick

O evento onClick é utilizado para capturar cliques em botões ou outros elementos:

// Componente
function Eventos(){

    return(
        <>
            <button onClick={function () { alert("Hello World!") }}>
                Clique aqui
            </button>

            <button onClick={() => alert("Hello World!")}>
                Clique aqui
            </button>
        </>
    );
}

// Exportar
export default Eventos;

Explicação:

• Podemos usar função tradicional ou arrow function
• O código dentro do evento só é executado ao clicar

---

2. Evento onChange com select

O evento onChange é muito utilizado para capturar mudanças em campos de formulário:

function EventoSelect(){

    return(
        <select onChange={(evento) => alert(evento.target.value)}>
            <option value="">Selecione</option>
            <option value="React">React</option>
            <option value="Angular">Angular</option>
            <option value="Vue">Vue</option>
        </select>
    );
}

// Exportar
export default EventoSelect;

Explicação:

• O event.target.value captura o valor selecionado
• Esse padrão funciona para input, select e textarea

---

3. Evento onMouseOver

O evento onMouseOver é acionado quando o mouse passa sobre um elemento:

function EventoMouse(){

    return(
        <p onMouseOver={() => alert("Cursor sobre o texto!")}>
            Passe o mouse aqui
        </p>
    );
}

// Exportar
export default EventoMouse;

Explicação:

• Esse evento é útil para efeitos visuais ou mensagens
• Também existe o evento onMouseOut

---

Dicas importantes

• Eventos em React usam camelCase (onClick, onChange)
• Funções anônimas são ideais para ações simples
• Evite lógica complexa diretamente no JSX

Agora você já sabe como trabalhar com eventos no React!

Acompanhe nossa aula no YouTube e veja esses exemplos funcionando na prática!

Abaixo deixo um vídeo mostrando cada etapa desta aula: