Um momento
Aula 06
Cursos / React: Componentes Controlados
Curso React: Componentes Controlados

Summary

Resumo do Transcript

Neste trecho, o foco é o gerenciamento do estado de checkboxes em uma aplicação de troca de frutas. O autor explica como usar o atributo checked para controlar se as checkboxes estão selecionadas ou não, com base em um array que contém os nomes das frutas.

Principais Pontos:

  • Uso do Atributo Checked: O atributo checked em um input do tipo checkbox determina se a checkbox está marcada. Um console.log mostra o valor deste atributo ao selecionar e desmarcar frutos (por exemplo, morango).

  • Controle do Checked: Para cada checkbox, o estado de checked será verdadeiro se o nome da fruta estiver presente em um array chamado frutas; caso contrário, será falso.

  • Array e indexOf: O método indexOf é usado para verificar a presença de uma fruta no array. Se o índice retornado for diferente de -1, a fruta está presente, e o checked será definido como true.

  • Testes: O autor demonstra a implementação deste conceito ao verificar a presença da banana e maçã no estado, mostrando como a interface visual se atualiza conforme o estado muda.

Exemplos de Implementação:

  • Para a banana:

    this.state.frutas.indexOf('banana') !== -1 ? true : false;
    
  • Para a maçã e morango, o mesmo conceito é aplicado.

A conclusão do autor é que todos os checkboxes estão funcionando corretamente de acordo com o estado gerenciado.

Video Transcript

Então a gente vai aqui dar o set state no final de um fruit exchange, mas antes disso a gente tem que fazer umas coisas a mais, não é tão simples como o input type text. Se não acho que a gente vai fazer a maneira de usar um array um pouco mais complicado que usar um objeto, mas a gente vai conseguir fazer. Uma coisa antes de continuar a gente tem que dar uma olhada nesse atributo desse cara chamado checked. Se não acho que esse input type checkbox tem um valor que é o nome da fruta, mas também tem um chamado checked que é o atributo que faz a checkbox ficar checked. Vou salvar aqui o console log, digitei event.target.check, para você ver o que acontece. Quando eu selecio no morango vai dar o console log true, significa que o morango está marcado. Quando eu desmarco está false e assim por diante. True, false. Então esse atributo checked aqui vai definir se a checkbox está marcada ou não. Então se eu voltar aqui para o meu template aqui na checkbox. E se eu adicionar o checked para a banana, deixa eu dar o wrap aqui. Se eu adicionar checked para o componente da banana, note que por padrão quando eu dar atualizada vai estar selecionado. Então a gente quer usar esse atributo para controlar esse input. Então a gente vai determinar se está checked ou não dependendo de o nome da fruta estar dentro da array frutas que está a parte do estado. O que é que significa? Então a gente vai procurar dentro dessa array, por exemplo se tiver banana dentro dessa array. Se a gente achar banana checked vai se tornar true. Então aqui vai ter que ter true. Se não, se não achar vai ser false. Uma maneira de buscar um array é a função index of no JavaScript. Por exemplo banana, maçã, eu tirei o assento só para ser mais rápido. Se eu der a index of banana, se achar banana vai voltar com o índice da array. Nesse caso vai ser o subzero. Se for maçã vai ser o número 1, se não encontrar vai ser negativo, menos 1. Então assim, se encontrar vai dar um índice, se não encontrar vai ser negativo, menos 1. Então o que eu vou fazer? Eu vou dar 10.state, quanto frutas, estou me referindo a essa array aqui dentro do estado. E vou dar uma busca, ponto index of, buscando o nome da propriedade, nesse caso banana, mono do valor. E se isso não for menos 1 significa que eu achei a banana dentro da array, que significa que deve estar marcado, checked. Vai ser true. Vamos só testar voltando aqui. O estado inicial tem a banana, então apareceu a checkbox. Se eu tirar a banana, salvar, note que não está marcada. Volta a banana, marca, entendeu? Então, this.state.frutas, se não for encontrada, não vai ser checked. Faça o mesmo para as outras checkbox. Vou te esperar fazer. E deu certo, vamos lá. Para aqui, esse que é o checkbox, a fruta não change, maçã, checked. This.state.frutas index of maçã. Ah. Não é igual, negative 1. Minus 1. Mesma coisa, vou dar o copy aqui. This.state.frutas index morango. Então, vou testar. Adicione morango. Está checkado. Substitui para o maçã. Tudo ok, né?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: