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