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.
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é?