Aula 75
Testando o valor da prop onChange do InputText prop nome
Summary
# Resumo do Transcript
Neste vídeo, o apresentador demonstra como testar o evento `OnChange` de um campo de input de texto em um componente React.
## Principais Pontos
1. **Definição do OnChange**:
- O evento `OnChange` é definido como uma função que recebe um parâmetro `event`.
- Através de `event.target.value`, acessa-se o valor do input de texto.
2. **Atualização do Estado**:
- O valor do input deve ser armazenado na variável de estado `nome` do componente, utilizando `setState`.
3. **Simulação do Evento**:
- O apresentador cria um evento falso para simular a mudança no input.
- Esse evento é passado para a função `OnChange` para testar se o estado é atualizado corretamente.
4. **Verificação do Estado**:
- Antes de chamar `OnChange`, o estado pode ter um valor inicial diferente.
- O teste confirma se, após a chamada, o estado `nome` reflete o novo valor "olamundo".
5. **Erros Comuns**:
- O apresentador menciona que se esquecer de usar `setState`, o estado não será atualizado, permanecendo com seu valor inicial.
## Conclusão
O vídeo termina convidando os espectadores a curtirem o vídeo e se inscreverem para receber mais conteúdos.
---
Obrigado por assistir!
Video Transcript
Estamos de volta, vamos continuar e testar o OnChange do input text.
Então vamos lá.
Deve incluir um input text cuja mudança de valor, cuja OnChange, a mudança de valor,
atualiza o estado do componente, a variável nome do estado do componente.
Então, você note que primeiro, que OnChange é uma definição de uma função, não é uma chamada.
Então vamos olhar na definição.
A definição OnChange é bem simples.
A função recebe primeiro como parâmetro o event.
Desse event, ponto target, ponto value, a gente acessa o valor da caixa de texto.
Desse valor a gente vai armazenar na variável do estado do componente formulario, chamada nome.
Para isso, usamos o set state do componente.
Quando chamamos essa função com um evento, esperamos que o estado do componente seja modificado logo.
Vamos testar isso. Primeiro, capturamos o OnChange.
Para capturar isso, acessamos o input text e a captura própria do input text, que vai ter que ser a definição do OnChange.
Vamos começar.
Esse cara vai nos dar a definição da OnChange.
Vamos executar esse método com um evento falso.
Vamos criar uma variável.
O evento tem o target e o value.
Vamos botar algo aqui.
Vamos lá.
A gente criou um evento falso para simular o evento.
A gente passa para chamada da função, o OnChange.
Esse cara aqui, que está selecionado aqui, é a definição da função.
Essa definição da função eu chamo a função com o evento.
Para executar isso melhor, deixe eu extrair esse cara por uma variável para você ver melhor.
Consta o OnChange, é esse cara aqui.
A gente pega o OnChange e chama com o evento.
É isso que eu estou fazendo.
A gente espera que o estado do componente seja modificado e que tenha o valor na variável nome, o olamundo.
Isso que a gente espera.
Salvar.
Vamos modificar essa definição da OnChange na implementação para ver o teste falar.
Vamos supor que eu esqueci de dar o set state, comentei e não vai atualizar.
Ele recebeu nada, porque o estado inicial tem valor de nome, stringlasia.
Mas a gente chamou a função com o evento do ponto target value com valor olamundo, mas ele não fez nada, então está errado.
Certo?
Salvar.
Tudo ok.
Se você quiser seguir antes de chamar o OnChange, você também pode mudar o estado para botar um valor inicial diferente do que está definido pelo componente aqui, só para verificar melhor.
Certo?
Com isso a gente termina de testar o OnChange.
Nós primeiro capturamos a definição da função definida como OnChange, do input text.
Aqui. Desculpa, vamos olhar aqui.
Então é uma definição que é passada para o OnChange, essa própria.
A gente pegou essa definição e chamou a própria função com o evento falso.
A gente criou o nosso object event com target, com value, que é o valor olamundo.
Aí a gente verificou, depois de chamar o OnChange, se realmente o estado do componente avariava o nome, tem um novo valor chamado olamundo que vem do evento.
Certo?
Então é isso, a gente terminou de testar o input text.
Se você gostou dos vídeos, por favor, clique no botão like e não se esqueça de se inscrever para poder receber vídeos cada semana.
Muito obrigado por assistir e até a próxima. Tchau.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: