Um momento
Aula 75
Cursos / React: Componentes Controlados
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: