Um momento
Aula 53
Cursos / CRUD com o Redux (e React Native)
Término da Implementação da Cor do Botão de Ok

Summary

# Resumo do Transcript

Neste vídeo, o autor discute a funcionalidade do botão de "OK" em um formulário, que muda de cor e estado de habilitação dependendo da validade do formulário. Aqui está um resumo dos principais pontos abordados:

1. **Funcionamento do Botão**:
   - O botão de "OK" muda de cor quando o formulário é inválido (desabilitado) e volta a habilitar-se quando algo é digitado.
   - O autor demonstra como o botão se torna `light gray` quando o formulário é inválido.

2. **Refatoração do Código**:
   - O autor sugere tornar o código mais eficiente, evitando chamadas duplas para a mesma função.
   - Ele cria uma variável chamada `submitDisabled` para armazenar o estado de habilitação do botão.
   - O estado do botão é determinado a partir desta variável, simplificando a lógica.

3. **Implementação**:
   - O código é ajustado para usar a nova variável em vez de chamadas repetidas.
   - O autor ajusta as condições para mudar a cor do botão com base na validade do formulário.

4. **Verificação Final**:
   - O autor testa o código e confirma que a cor do botão muda corretamente entre `light gray` e `white` conforme o estado do formulário.

O vídeo conclui com agradecimentos e um convite para assistir ao próximo.

Video Transcript

O botão de OK já muda de cor e está habilitado. Certo? Novamente aqui, se nós eletarmos o título, o formulário agora está inválido. Por isso, o botão de OK muda de cor. No momento em que nós digitamos alguma coisa, ele habilita de novo. Certo? Agora, voltando aqui ao nosso código, está tudo legal, mas vamos fazer uma rapatorização aqui. Você note que eu estou chamando desse ponto que eu em submet aqui e também lá embaixo no disabled. Para ser um pouco mais eficiente, vamos só chamar essa função uma vez, em vez de duas vezes. Para fazer isso, nós vamos amazenar o valor dentro de uma variável. Então, esse cara aqui, vamos remover e vamos criar uma variável chamada submit disabled. E vai determinar se o botão de OK vai ser desabilitado. Vamos lá em cima antes de retornar esse template e criar essa variável aqui. Ponst submit disabled e vou dar o valor daquele que eu recortei, que é o não note despoints cansubmit. Então, nesse caso, essa variável vai determinar se o formulário for inválido, desabilitado ou não. Então, para o background call aqui, a gente tem que mudar esse cara. Porque a gente não quer mais chamar esse de novo, vai só usar submit disabled, esse valor, que nesse caso vai estar invertido. Se o submit estiver desabilitado, nós queremos light gray. Então, a gente vai inverter esse cara aqui. Você pode inverter os valores aqui ou pode adicionar esse assim. Depende de você. Eu vou só mover esse cara para aqui e remover. Essa maneira, então, se o formulário for inválido, a cor do botão de submit, OK, vai ser light gray. Se não for inválido, vai ser untake white. Vamos salvar e ver se deu tudo certo. Vamos lá aqui. O botão de OK está light gray. Agora, é habilitado, desabilitado, ainda desabilitado. Habilitado. Certo? Então, por esse vídeo é só. Agora, o botão de OK vai mudar de cor, dependendo do formulário estiver inválido ou não. Muito obrigado por assistir e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: