Resumo do Vídeo sobre Checkboxes e Radio Buttons em React

No vídeo passado nós aprendemos a fazer checkboxes usando React, componentes controlados. Nós definimos os inputs de tipo checkbox e para cada um desses inputs nós associamos uma função onChange que lida com o evento onChange. Quando der onChange vai chamar a função que a gente definiu chamada onFruitChange. Isso vai fazer toda a lógica para poder atualizar o estado do componente. A gente mantém o estado para frutas e dependendo da que caches seja relacionadas vai ser true ou false. Só a maçã está relacionada por tanto maçã é true. A banana é false e o morango é false porque não estão relacionados. Antes de continuar para a gente dar um olhada na radio, botões de radio, rádio, queria só dar um detalhe de por que eu defini o estado assim só usando o nome state e por que eu defini minhas funções de onChange usando a função de flash em combinação com a sign aqui. Esses são chamados property initializers. É uma novidade que já vem além do s6, depois do s6. Não é s7, s7 não apareceu, não deu tempo de ser incluído no s7. Portanto, não posso dizer que é parte do s7. É parte de algo além do s6 e é disponível por causa do s7. Por isso que eu posso usar e a maneira que a gente fez nosso aplicativo usando o create react apps lembra já inclui o babel e as configurações para poder permitir nós usarmos essa nova taxa. Então, com property initializers você pode definir o estado de uma função de um componente do react só dizendo state igual o objeto. E se não fosse usar property initializers, a gente teria que definir o constructor. Constructor é uma função construtor que pega as props como argumento. Primeiramente você tem que chamar o super com as props e se você desfina o estado inicial dessa maneira. Nesse caso, o equivalente sem usar o property initializers ia ser desta maneira aqui. Você pode usar qualquer um dos dois. Já que está disponível, já temos disponível property initializers, eu gosto de usar porque eu distito menos. Mas você pode também usar a maneira do constructor. É o equivalente e essa aqui é a maneira que se faz no s6. Tá bom? Só dela está. E eu vou prosseguir para explicar porque eu usei a função de flash aqui. Nesse caso, o problema era porque eu estou usando a palavra chave.d. O contexto da palavra chave.d se você usar uma função normal de JavaScript, a chamada function, toda a function vai definir a sua própria palavra chave.d, seu próprio contexto. E se eu usasse a function vai ser o contexto da function, mas o contexto que a gente quer aqui, a palavra chave, é o contexto do componente chamado app. A gente vai dar o set state, vai mudar o estado do app. A gente não vai mudar o estado da função própria. A maneira de a gente consertar isso normalmente seria usando o bind, que eu já demonstrei antes. Quando você pode chamar essa função, você chama o bind. Por exemplo, onFluidChange ou NomChange, você põe o bind.d. Nesse caso, a palavra chave.d, nesse contexto, se refere ao componente app. Então, ele vai dar o bind. Vai dizer, quando você estiver no contexto, dentro da função, quando você se referir a d, por favor, se refira ao app. O contexto é o app. Normalmente, o pessoal define esses bindings no construtor, como eu tinha mostrado antes, naquela função construtor. Deixa eu... Normalmente, depois de inicializar o estado, o pessoal dá um bind, por exemplo, no onNomChange, vou copiar, e assim por diante para todas as funções que você quiser dar o bind, essa conexão, para setar o contexto. Mas agora que já temos de forneiros o próprio initializes, outra maneira de não ter que usar isso, é somente você usar a função de flash, porque a função de flash não define o seu próprio contexto da palavra chave. Então, quando você usa a função de flash, esse des vai se referir ao contexto do elemento que contém essa função. Nesse caso, é a classe app. Então, quando você fala v, se você está referindo a palavra chave, do contexto a fora, fora dessa função, que nesse caso vai ser o corpo dessa classe chamada app, que é o componente. E esse componente tem a função chamada setState, por isso que a gente usa a função de flash. Se você quiser aprender mais a função de flash, pode dar uma olhada na documentação no mdn. Nesse caso, eu estou em inglês, mas eu acho que tem português aqui. Resumo e tal. Deixa eu procurar esse. Que antes da error function, toda a função define o seu próprio valor de 10, como eu falei antes. No echo no esquerdo, é o que... Então, error functions capturam o valor de 10 do contexto vinculado. Como eu disse, do componente, nesse caso, nosso caso, o componente, que contém essa função. Então, o des se refere ao componente, mas não ao des da função própria. E assim por diante, você pode dar uma olhada você mesmo. Vamos continuar, voltando ao código. E usa a função de flash e combina com o próprio tinnishelizer. Dessa maneira que, na verdade, isso aqui é um próprio tinnishelizer que define a função. Tá bom? Então, combina o próprio tinnishelizer com a função de flash, e a flash vai poder não ter que dar o bind.