Aula 03
Curso React: Componentes Controlados
Summary
## Resumo do Transcrito
O conteúdo apresentado discute a manipulação do `this` em um componente React e como corrigir erros relacionados ao seu uso.
1. **Erro com `this`**:
- É mencionado que a palavra-chave `this` não estava definida corretamente, resultando em um erro "undefined".
- O erro ocorre porque é necessário usar o método `bind` para garantir que `this` se refere ao componente `App`.
2. **Uso do `bind`**:
- É sugerido fazer um `bind` dentro da função `onNomChange` para que `this` aponte corretamente para o componente `App`, permitindo que a função `setState` funcione.
3. **Substituição por Arrow Functions**:
- O autor comenta que não usa mais `bind` e prefere utilizar funções de flecha (`arrow functions`).
- Funções de flecha permitem que o valor de `this` se refira ao bloco externo (o componente `App`), evitando a necessidade de um `bind`.
4. **Funcionamento do Componente Controlado**:
- O componente se torna controlado quando um valor é mantido em estado (`state`) e a função `onChange` é definida para atualizar este estado.
- A função `onChange` é chamada sempre que o valor do input muda, usando `event.target.value` para acessar o valor do input.
5. **Sugestões Finais**:
- O autor recomenda inicializar o estado com uma string vazia e remover console logs desnecessários.
- Uma revisão final explica que, para um componente ser controlado, é preciso:
- Mudar o valor para uma variável de estado.
- Definir uma função `onChange` que atualiza o estado.
Parabéns! Você criou seu primeiro componente controlado.
Video Transcript
A palavra chave des vai se referir não ao componente app, mas a outra coisa.
Então vamos ver o que se refere com esse console log salvei,
vou dar um refresh,
digitei a ordem que aconteceu, undefined.
A palavra chave des não estava definida.
E era o erro que a gente recebeu antes.
Dizia que não estava definido.
A razão disso é a gente ter que dar um bind aqui.
Normalmente uma maneira de fazer isso, de consertar isso,
é fazer dentro da função, quando chamar a função aqui, você dá um bind des,
porque essa palavra chave des no contexto aqui se refere ao componente app.
E como esse componente tem o set state, vai funcionar.
Então se eu der um bind des, dentro da função onNomChange,
quando eu me referir a des, vai se referir ao componente app.
E como o componente app tem a função set state, vai mudar o estado aqui.
Essa é uma maneira de consertar isso, se eu mudar aqui.
Vamos ver.
Digitei, se notis que funciona agora.
Tá bom?
Agora eu normalmente não uso mais o bind.
Em vez de usar bind, eu uso a função de flecha.
Essa função, você faz ela se tornar a função de flecha,
botam um igual aqui e uma flecha aqui.
Tá bom?
Dessa maneira, como a função é a função de flecha, a palavra chave des,
vai se referir ao componente app que está no bloco superior, o bloco de fora.
Quando eu falo de bloco, eu falo desse bloco delimitado pelas chaves,
chamado também de closure no inglês.
Então, quando você usa a função de flecha, o conteja a palavra chave des se referir
a palavra chave des do bloco anterior aqui, o bloco de fora, o app.
Tá bom?
Essa é a maneira de não ter que usar bind des,
not o igual e a flecha.
Salva e vê o que acontecer.
Digita funcionando.
Certo?
Posso apagar e assim por diante.
Toda vez que eu digitar um caractere, vai chamar essa função,
o nom change, a função chama o set state do componente,
que vai mudar o estado para o novo valor dado pelo event.target.value.
Target se refere ao input, nesse caso aquele que acionou o evento.
Value é um atributo ou propriedade do componente input.
Certo?
Então, vamos delatar esse console log.
A gente aprendeu sobre o set state e também vamos inicializar esse nome para
vazia, string vazia.
A gente não quer um valor inicial, então quando você aparecer o formular,
você digita o seu nome e vai estar tudo ok.
Vai estar o input, agora está controlado pelo react.
E é isso que se refere ao componente controlado.
E os parabéns, você fez o seu primeiro componente controlado.
Só revisão rapidinho para fazer esse componente,
para o componente se tornar controlado, você muda o valor
para uma variável de estado e você define a sua função on change,
que vai ser acionada toda vez que você mudar o input, o valor do input.
E nessa função on change tem que mudar o estado para o valor, o novo valor
e você digitou ou você selecionou.
Tá bom?
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: