Resumo do Transmissão

Agora vamos mudar esses checkboxes para serem componentes controlados pelo React. Agora estamos sendo controlados por padrão. A gente quer mudar e controlar os inputs diretamente usando React. Se note que aqui é um caso diferente, não vai ser o valor que a gente vai pôr no estado. A gente tem que saber quais as opções são selecionadas. Então pode ser múltiplo escolha. Então tem duas maneiras de fazer isso. O padrão do H... é adicionar a escolha, o valor da escolha a 1 array. Por exemplo, se eu selecionar banana, morango, vai aparecer assim. No array. E se eu remover a banana, aqui, desmarcar, vai remover a banana dessa array. Dessa... vai ficar assim. Essa é uma maneira padrão de a gente manter o estado. Outra maneira é usar um objeto. Por exemplo, banana, false, maçã, false, morango, true. Nesse caso, vai ser um boolean, verdadeiro ou false. Verdadeiro se estiver selecionado ou false se não estiver. Se eu selecionar banana, vai mudar o false para true. Banana selecionada, maçã não está selecionada, morango está selecionado. Essa é outra maneira. Você pode escolher o que você gostar. Tá bom? Vou te mostrar como fazer das duas maneiras. Primeira maneira, a gente... O valor já é definido estaticamente, então deixa ele, vamos definir a onde a gente... Mas qual o estado inicial do componente, nesse caso? Nesse caso, vai ser frutas e vai ser um array inicialmente. Esse aqui significa nenhum estado selecionado, mas se você quiser o padrão adicionar, só adicionar a banana para ser padrão inicial e assim por diante, deixe um array e a gente vai adicionar um change para cada um desses caras. Um change, eu vou selecionar todo dia uma vez e botar um change. Vamos chamar desse, onFruitChange. Vamos definir onFruitChange. Será que vou precisar usar a palavra chave desse aqui? Acho que sim, porque vamos definir o estado, vamos mudar o estado para o novo estado de frutas. Então, eu vou fazer isso a função de flash, adiciono igual, depois do nome antes do parêntese e adicione a flash depois do parêntese antes da chave, para não ter problema com o contexto da palavra chave desse. Vai ter um eventos sempre, função de onChange, sempre um evento como parâmetro. Vou dar um console log, event.target para você ver o que é que dá. Salvar, vamos selecionar um, selecionar a maçã, selecionar o quê? Aquela checkbox, selecionar a banana, selecionar o quê? A checkbox da banana e assim por diante. O que a gente está interessado aqui? Então, se tiver um array, se a gente selecionar a banana, a gente pega o valor banana e adiciona essa array aqui assim. Se a gente tiver maçã, adiciona maçã e assim por diante. Mas tem que sempre adicionar. Vai ser no mínimo nenhum e no máximo três elementos, banana, maçã e morango. E tem as outras possibilidades, banana, maçã, morango, maçã e morango.