Tutorial Reagir, Parte 16: A quarta fase do trabalho em um aplicativo TODO, processamento de eventos

Na parte de hoje da tradução do tutorial do React, continuaremos trabalhando no aplicativo Todo e falaremos sobre como o React lida com eventos.



→ Parte 1: visão geral do curso, razões para a popularidade do React, ReactDOM e JSX
→ Parte 2: componentes funcionais
→ Parte 3: arquivos de componentes, estrutura do projeto
→ Parte 4: componentes pai e filho
→ Parte 5: início do trabalho em um aplicativo TODO, noções básicas de estilo
→ Parte 6: sobre alguns recursos do curso, JSX e JavaScript
→ Parte 7: estilos embutidos
→ Parte 8: trabalho contínuo na aplicação TODO, familiaridade com as propriedades dos componentes
→ Parte 9: propriedades do componente
→ Parte 10: Workshop sobre como trabalhar com propriedades e estilo de componentes
→ Parte 11: geração dinâmica de marcação e método de matrizes de mapas
→ Parte 12: workshop, terceira etapa do trabalho em uma aplicação TODO
→ Parte 13: componentes baseados em classe
→ Parte 14: workshop sobre componentes baseados em classe, status dos componentes
→ Parte 15: oficinas de saúde componentes
→ Parte 16: a quarta etapa do trabalho em um aplicativo TODO, manipulação de eventos
→ Parte 17: quinta etapa do trabalho em um aplicativo TODO, modificando o estado dos componentes
→ Parte 18: a sexta etapa do trabalho em um aplicativo TODO
→ Parte 19: métodos do ciclo de vida dos componentes
Parte 20: a primeira lição sobre renderização condicional
→ Parte 21: segunda lição e workshop sobre renderização condicional
→ Parte 22: sétima etapa do trabalho em um aplicativo TODO, baixando dados de fontes externas
→ Parte 23: primeira lição sobre como trabalhar com formulários
→ Parte 24: Segunda lição sobre formulários
→ Parte 25: Workshop sobre como trabalhar com formulários
→ Parte 26: arquitetura do aplicativo, padrão Container / Component
→ Parte 27: projeto do curso

Lição 29. Oficina. Aplicação TODO. Estágio número 4

→ Original

▍Job

Da última vez, baixamos a lista de tarefas do aplicativo JSON e, percorrendo a matriz resultante, formamos, usando o método map() , um conjunto de componentes. Gostaríamos de modificar esses dados. E só podemos fazer isso se os pré-carregarmos no estado do componente.

A tarefa de hoje é converter o componente App em um componente state e carregar os dados do caso importados no estado desse componente.

▍Solução

Lembre-se do código do componente do App já em nosso projeto:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" function App() {   const todoItems = todosData.map(item => <TodoItem key={item.id} item={item}/>)     return (       <div className="todo-list">           {todoItems}       </div>   ) } export default App 

Para poder modificar dados da lista de tarefas, precisamos colocar o que está agora armazenado em todosData no estado do componente App .

Para resolver esse problema, primeiro devemos transformar o componente funcional do App em um componente baseado na classe. Em seguida, precisamos carregar os dados de todosData no estado e, formando a lista de componentes TodoItem , ignore não mais a matriz todosData , mas a matriz com os mesmos dados armazenados no estado. Aqui está como ficaria:

 import React from "react" import TodoItem from "./TodoItem" import todosData from "./todosData" class App extends React.Component {   constructor() {       super()       this.state = {           todos: todosData       }   }     render() {       const todoItems = this.state.todos.map(item => <TodoItem key={item.id} item={item}/>)             return (           <div className="todo-list">               {todoItems}           </div>       )   } } export default App 

Deve-se notar que, após todas essas transformações, a aparência do aplicativo não mudou, mas, após concluí-las, preparamos-o para mais trabalhos.

Lição 30. Manipulando Eventos no React

→ Original

A manipulação de eventos é o que impulsiona aplicativos da Web e o que os diferencia de sites estáticos simples. A manipulação de eventos no React é bastante simples, é muito semelhante à forma como os eventos são processados ​​em HTML comum. Portanto, por exemplo, no React, existem manipuladores de eventos onClick e onSubmit , que são semelhantes aos mecanismos HTML semelhantes apresentados na forma de onclick e onsubmit , não apenas em termos de nomes (em React, no entanto, seus nomes são formados usando um estilo camel), mas também em exatamente como eles trabalham com eles.

Aqui consideraremos exemplos, experimentando um aplicativo padrão criado usando create-react-app , cujo arquivo de componente do App contém o seguinte código:

 import React from "react" function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button>Click me</button>       </div>   ) } export default App 

É assim que nosso aplicativo se parece em um navegador.


Página do aplicativo no navegador

Antes de podermos falar seriamente sobre a modificação do estado dos componentes usando o método setState() , precisamos lidar com eventos e manipulação de eventos no React. Mecanismos de processamento de eventos permitem que o usuário do aplicativo interaja com ele. Um aplicativo pode responder, por exemplo, ao click ou hover eventos, executando determinadas ações quando esses eventos ocorrem.

A manipulação de eventos no React é realmente bastante direta. Se você estiver familiarizado com os mecanismos HTML padrão usados ​​para atribuir manipuladores de eventos a controles, como o manipulador de eventos onclick , verá imediatamente as semelhanças com os mecanismos que o React nos oferece.

Por exemplo, para tornar possível por meio do HTML que, ao clicar em um determinado botão, uma função seja executada, você pode usar esta construção (desde que essa função exista e esteja acessível):

 <button onclick="myFunction()">Click me</button> 

No React, como já mencionado, os manipuladores de eventos têm nomes compostos de acordo com as regras no estilo camelo, ou seja, onclick se tornará onclick aqui. O mesmo vale para o onMouseOver eventos onMouseOver e para outros manipuladores. O motivo dessa alteração é porque ela usa uma abordagem para nomear entidades que é comum ao JavaScript.

Agora vamos trabalhar com nosso código e fazer o botão responder aos cliques nele. Em vez de passar o código para o manipulador para chamar a função como uma string, passamos o nome da função entre chaves. A aquisição do fragmento correspondente do nosso código ficará agora assim:

 <button onClick={}>Click me</button> 

Se você der uma olhada no código do componente App que usamos neste exemplo, notará que ainda não foi declarada uma função que planeja chamar quando o botão for clicado. Em geral, agora podemos conviver com uma função anônima declarada diretamente no código que descreve o botão. Aqui está como ficaria:

 <button onClick={() => console.log("I was clicked!")}>Click me</button> 

Agora, quando você clica no botão, o texto em I was clicked! .

O mesmo efeito pode ser alcançado declarando uma função independente e trazendo o código do arquivo do componente para o seguinte formato:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

Para obter uma lista completa dos eventos suportados pelo React, consulte esta página de documentação.

Agora tente equipar nosso aplicativo com um novo recurso. Ou seja, certifique-se de que quando você passa o mouse sobre a imagem no console, uma mensagem é exibida. Para fazer isso, você precisa encontrar um evento adequado na documentação e organizar seu processamento.

De fato, esse problema pode ser resolvido de diferentes maneiras; demonstraremos sua solução com base no evento onMouseOver . Quando esse evento ocorrer, exibiremos uma mensagem no console. Aqui está a aparência do nosso código:

 import React from "react" function handleClick() {   console.log("I was clicked") } function App() {   return (       <div>           <img onMouseOver={() => console.log("Hovered!")} src="https://www.fillmurray.com/200/100"/>           <br />           <br />           <button onClick={handleClick}>Click me</button>       </div>   ) } export default App 

O processamento de eventos oferece ao programador uma enorme oportunidade, que, obviamente, não se limita a enviar mensagens para o console. No futuro, falaremos sobre como o processamento de eventos, combinado com a capacidade de alterar o estado dos componentes, permitirá que nossos aplicativos resolvam as tarefas atribuídas a eles.

Como sempre - recomendamos que você reserve um tempo para experimentar o que aprendeu hoje.

Sumário

Hoje você fez um pequeno trabalho prático que lançou as bases para grandes mudanças no aplicativo Todo e se familiarizou com os mecanismos de manipulação de eventos no React. Da próxima vez, você receberá outro workshop e um novo tópico será apresentado.

Caros leitores! Se você, familiarizado com a metodologia de processamento de eventos no React, experimentou o que aprendeu, conte-nos.