Estado é um conceito crucial em reagir.
E com nosso conhecimento sobre o estado, agora também podemos garantir que não apenas criemos uma meta fictícia, mas
na verdade refletimos a real entrada do usuário.
Então, para isso, vamos voltar ao novo objetivo.
O que você quer fazer é armazenar a entrada do usuário em alguma variável em cada pressionamento de tecla, para que tenhamos o valor mais recente
digitado pelo usuário e depois passe esse valor inserido para props na meta de anúncio ou para nossa nova meta aqui em
vez de esse texto fictício codificado que temos no momento.
Então aqui vai você.
Quero capturar a entrada do usuário aqui e enviá-la, em vez de ir para o texto aqui como parte do novo
objetivo.
Então, podemos criar uma variável aqui, entrada do usuário ou texto digitado, talvez, que é uma string vazia inicialmente.
E aqui na entrada, eles estão realmente definidos no evento de mudança.
Podemos ouvir o que é acionado e cada pressionamento de tecla.
Então agora podemos adicionar uma função.
Manipulador de alteração de texto.
Lá, obteremos um objeto de evento e esse objeto de evento manterá a entrada do usuário no evento.
Target, que se refere ao elemento de entrada, valor do ponto e, portanto, podemos definir um texto igual a
esse.
Agora, digite o texto mudará a cada pressionamento de tecla.
Uma vez que ligamos a mudança para manipulador de alteração de texto como este.
Agora, aqui no novo objetivo, podemos usar o texto inserido.
E daí, o usuário entrou aqui?
E daí em diante, vamos bloquear todo o console e você vai aqui para que possamos ver que isso funciona,
se agora fizermos a segurança e eu entrar em teste aqui e clicar na meta.
Vemos que isso funciona e isso é produzido aqui.
Essa abordagem geralmente é boa, mas pode ter uma pequena falha.
E se quisermos redefinir isso depois de adicionar um novo objetivo?
Claro, podemos ir ao nosso.
Manipulador de anúncios de ouro.
E uma vez que criamos o novo objetivo, podemos, é claro, definir o texto de volta para uma string vazia.
Mas é claro que isso não fará nada.
Se eu inseri o objetivo dele, veja bem, isso não se reflete aqui.
Por que isso não é refletido?
Porque o novo componente dourado não foi renderizado.
Este não é o estado que estamos gerenciando.
Essa é uma variável regular.
Então, é claro, podemos mudar isso.
Claro que podemos usar para alterar o valor.
Mas se definirmos um novo valor para ele.
Isso não se reflete em nossa entrada porque essa entrada possui apenas uma conexão com o manipulador de alterações de texto.
Ele não sabe que deve refletir o valor atual armazenado e inserido o texto.
Agora poderíamos dizer ao componente de entrada que ele deveria fazer isso vinculando seu valor prop.
Podemos vincular isso ao texto inserido e, com o pai, informamos o componente de entrada.
Ei, o valor exibido na entrada deve ser desvalorizado, armazenado e inserido.
Texto.
Se fizermos isso, saberemos algo novo.
Agora, não podemos mais digitar lá, se eu digitar aqui, a entrada não será refletida.
Agora, se você pensar bem, isso faz sentido.
Quando você diz à reatância que a entrada deve ser renderizada de forma que o valor seja digitado, o texto a
cada pressionamento de tecla que alteramos, insira o texto, mas a inserção de texto não é estado.
É uma variável regular.
Então isso significa que alteramos a variável a cada pressionamento de tecla, mas reagimos mil reescrevendo o componente de
entrada.
Ele não reflete o valor atualizado para reagir, desvaloriza-se sempre como uma sequência vazia, porque foi a última vez
que ele renderizou esse componente e o Delford descarregou o código X e, portanto, como entrada.
Então, precisamos dizer para reagir que esse é um estado e que, quando ele muda, deve renderizar nosso J
como código X.
Então, novamente, podemos importá-lo como estado aqui e converter enter em texto, já usando a estrutura aqui e você afirma que
é uma string vazia inicialmente ou tem uma string vazia inicialmente aqui porque estou gerenciando meu
texto inserido.
E o segundo elemento é uma função para atualizar o estado que, portanto, chamará o texto digitado no conjunto.
E agora, aqui, a cada pressionamento de tecla, defino meu texto inserido para desvalorizar um valor de destino do evento.
E aqui não precisamos dessa forma de função de atualização do estado, porque temos um novo valor
que não depende do estado anterior.
Assim, podemos apenas atualizar para definir assim.
E agora isso vai.
Renderize novamente esse componente sempre que digitarmos, sempre que chamarmos de conjunto, digitar ainda cada pressionamento de tecla, o que
soa horrível, mas ótimo.
Reagir.
Faremos isso de uma maneira muito eficiente e, portanto, esse valor mais recente será refletido no elemento de
entrada.
E aqui no ADCO Handler, se quisermos atualizar, inserir, texto e redefini-lo, podemos definir, recuperar, definir, inserir texto e configurá-lo
novamente para uma string vazia.
E com isso agora temos o melhor dos dois mundos.
Podemos inserir algo aqui que funcione.
Mas também podemos manipulá-lo e redefinir depois de adicionar um novo objetivo como este.
Portanto, este é agora e nunca um caso de uso para gerenciamento de estado.
E é claro que existem muitos casos de uso em nosso aplicativo REACT.
E aqui estamos usando o gerenciamento de estado para criar algo que às vezes também é chamado de ligação vinculativa, onde
vincula o valor da entrada e a cada pressionamento de tecla que estamos atualizando para valor, que
depois ligamos de volta à entrada para sempre refletir a valor mais recente dentro da entrada.
Mas também somos capazes de gerenciar isso de uma maneira dirigida pelo estado.
Então, todos nós temos a chance de manipular o valor de dentro do nosso código aqui em cima e refletir isso de
volta na entrada nesse caso?
Com isso, temos outro cenário de gestão do estado e agora podemos adicionar nossos próprios objetivos.