Aula 14 - Eventos no React

Prévia do material em texto

Aula 14 - Eventos no React 
 
1. Para um desenvolvedor criar um aplicativo que interaja com o usuário, quando ele 
clicar em um botão, é necessário tratar os eventos do botão. 
Marque a opção que representa um evento de botão em um programa front end: 
 
Resposta: E. onClick(). 
 
Justificativa: O evento de botão que captura o clique do mouse no botão é o onClick. 
Nenhuma das outras opções contém um evento válido. 
 
2. Para programar eventos, é necessário conhecer as diferenças sutis existentes 
entre os eventos DOM e os eventos React, como a forma de escrever os eventos e 
seus manipuladores. 
Dado o seguinte trecho de código: 
<a href="#" onclick="alert('Link clicado!'); return false">Clique Aqui</a> 
marque a opção correta. 
 
Resposta: C. Ao clicar no link, é aberto um alerta. 
 
Justificativa: Ao clicar no link, é chamado o evento onclick, que abre um alerta 
com o texto "Link clicado!". O onclick é um evento DOM em HTML; em React 
seria onClick. O return false evita o comportamento padrão do navegador. O trecho de 
código é em HTML e JavaScript. Por conta do false, o link não redirecionará para outra 
página. 
 
3. Quando um evento é disparado, é possível tratá-lo para que aconteçam ações 
específicas dependendo do tipo do evento. 
Marque a opção que representa o início de um trecho de código de um manipulador 
de eventos: 
 
Resposta: A. btn.onclick = function() { alert(“Alerta”); } 
 
Justificativa: O código que manipula o evento é o btn.onclick, que recebe uma 
função que emite um alerta. O render é um método React para apresentar o botão 
clicar na tela. O método setState é utilizado para atualizar o estado do componente. O 
<input> é um elemento HTML, e não um manipulador de eventos. O 
método handleEvent recebendo o handleEvent.bind é utilizado para tornar 
o handleEvent acessível em outro local. 
 
4. Quando um evento é disparado, ele pode ser propagado entre os métodos por 
meio de uma variável, com possibilidade de lançar uma exceção ou gerar erro, no 
caso de existirem problemas sintáticos ou semânticos no código. 
Analise o trecho de código a seguir e marque a opção correta: 
<button onClick={(e) => this.deleteRow(id, e)}>Deletar linha</button> 
 
Resposta: A. O argumento “e” representa o evento do React. 
 
Justificativa: O argumento “e“ diz respeito ao evento do React, e não representa 
apenas erro ou exceção. O código não contém erros semânticos ou sintáticos. 
 
 
https://ultra.content.blackboardcdn.com/ultra/uiv3900.74.0-rel.25_afc4ff2
5. Existem eventos genéricos para todos os navegadores, como também existem 
eventos específicos para determinados navegadores. 
Sobre os eventos DOM e React, marque a opção correta: 
 
Resposta: B. Eventos em React são escritos usando camel case. 
 
Justificativa: Os nomes dos eventos em React são escritos usando camel case, em 
vez de letras minúsculas. Um elemento HTML DOM pode disparar um evento, e é 
possível retornar false nele para prevenir a ação padrão do evento. No manipulador de 
eventos React, a função é passada como manipulador de eventos.