1
00:00:02,180 --> 00:00:04,700
Estado é um conceito crucial em reagir.

2
00:00:05,060 --> 00:00:10,820
E com nosso conhecimento sobre o estado, agora também podemos garantir que não apenas criemos uma meta fictícia, mas

3
00:00:10,940 --> 00:00:13,640
na verdade refletimos a real entrada do usuário.

4
00:00:14,060 --> 00:00:15,740
Então, para isso, vamos voltar ao novo objetivo.

5
00:00:16,280 --> 00:00:24,860
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

6
00:00:24,860 --> 00:00:32,300
digitado pelo usuário e depois passe esse valor inserido para props na meta de anúncio ou para nossa nova meta aqui em

7
00:00:32,300 --> 00:00:36,170
vez de esse texto fictício codificado que temos no momento.

8
00:00:36,950 --> 00:00:37,750
Então aqui vai você.

9
00:00:37,880 --> 00:00:43,610
Quero capturar a entrada do usuário aqui e enviá-la, em vez de ir para o texto aqui como parte do novo

10
00:00:43,610 --> 00:00:44,090
objetivo.

11
00:00:44,840 --> 00:00:54,470
Então, podemos criar uma variável aqui, entrada do usuário ou texto digitado, talvez, que é uma string vazia inicialmente.

12
00:00:55,280 --> 00:00:58,520
E aqui na entrada, eles estão realmente definidos no evento de mudança.

13
00:00:58,580 --> 00:01:00,740
Podemos ouvir o que é acionado e cada pressionamento de tecla.

14
00:01:01,310 --> 00:01:02,570
Então agora podemos adicionar uma função.

15
00:01:05,330 --> 00:01:07,240
Manipulador de alteração de texto.

16
00:01:08,220 --> 00:01:14,400
Lá, obteremos um objeto de evento e esse objeto de evento manterá a entrada do usuário no evento.

17
00:01:15,470 --> 00:01:21,080
Target, que se refere ao elemento de entrada, valor do ponto e, portanto, podemos definir um texto igual a

18
00:01:21,080 --> 00:01:21,620
esse.

19
00:01:23,440 --> 00:01:26,410
Agora, digite o texto mudará a cada pressionamento de tecla.

20
00:01:26,620 --> 00:01:30,730
Uma vez que ligamos a mudança para manipulador de alteração de texto como este.

21
00:01:32,720 --> 00:01:37,790
Agora, aqui no novo objetivo, podemos usar o texto inserido.

22
00:01:37,880 --> 00:01:39,160
E daí, o usuário entrou aqui?

23
00:01:40,150 --> 00:01:45,900
E daí em diante, vamos bloquear todo o console e você vai aqui para que possamos ver que isso funciona,

24
00:01:45,900 --> 00:01:50,310
se agora fizermos a segurança e eu entrar em teste aqui e clicar na meta.

25
00:01:50,910 --> 00:01:52,890
Vemos que isso funciona e isso é produzido aqui.

26
00:01:54,050 --> 00:01:58,490
Essa abordagem geralmente é boa, mas pode ter uma pequena falha.

27
00:01:58,850 --> 00:02:01,430
E se quisermos redefinir isso depois de adicionar um novo objetivo?

28
00:02:01,970 --> 00:02:04,340
Claro, podemos ir ao nosso.

29
00:02:05,540 --> 00:02:06,560
Manipulador de anúncios de ouro.

30
00:02:08,470 --> 00:02:12,490
E uma vez que criamos o novo objetivo, podemos, é claro, definir o texto de volta para uma string vazia.

31
00:02:13,330 --> 00:02:14,800
Mas é claro que isso não fará nada.

32
00:02:15,280 --> 00:02:18,640
Se eu inseri o objetivo dele, veja bem, isso não se reflete aqui.

33
00:02:18,700 --> 00:02:19,960
Por que isso não é refletido?

34
00:02:20,470 --> 00:02:22,410
Porque o novo componente dourado não foi renderizado.

35
00:02:22,510 --> 00:02:24,170
Este não é o estado que estamos gerenciando.

36
00:02:24,190 --> 00:02:25,540
Essa é uma variável regular.

37
00:02:25,600 --> 00:02:27,040
Então, é claro, podemos mudar isso.

38
00:02:27,280 --> 00:02:28,930
Claro que podemos usar para alterar o valor.

39
00:02:29,230 --> 00:02:31,480
Mas se definirmos um novo valor para ele.

40
00:02:31,900 --> 00:02:37,150
Isso não se reflete em nossa entrada porque essa entrada possui apenas uma conexão com o manipulador de alterações de texto.

41
00:02:37,480 --> 00:02:42,040
Ele não sabe que deve refletir o valor atual armazenado e inserido o texto.

42
00:02:42,850 --> 00:02:47,260
Agora poderíamos dizer ao componente de entrada que ele deveria fazer isso vinculando seu valor prop.

43
00:02:47,710 --> 00:02:52,390
Podemos vincular isso ao texto inserido e, com o pai, informamos o componente de entrada.

44
00:02:52,600 --> 00:02:58,300
Ei, o valor exibido na entrada deve ser desvalorizado, armazenado e inserido.

45
00:02:58,330 --> 00:02:58,870
Texto.

46
00:02:59,840 --> 00:03:02,540
Se fizermos isso, saberemos algo novo.

47
00:03:03,140 --> 00:03:07,430
Agora, não podemos mais digitar lá, se eu digitar aqui, a entrada não será refletida.

48
00:03:08,000 --> 00:03:10,190
Agora, se você pensar bem, isso faz sentido.

49
00:03:10,660 --> 00:03:16,010
Quando você diz à reatância que a entrada deve ser renderizada de forma que o valor seja digitado, o texto a

50
00:03:16,460 --> 00:03:21,220
cada pressionamento de tecla que alteramos, insira o texto, mas a inserção de texto não é estado.

51
00:03:21,230 --> 00:03:22,400
É uma variável regular.

52
00:03:22,850 --> 00:03:28,250
Então isso significa que alteramos a variável a cada pressionamento de tecla, mas reagimos mil reescrevendo o componente de

53
00:03:28,250 --> 00:03:28,790
entrada.

54
00:03:28,880 --> 00:03:34,910
Ele não reflete o valor atualizado para reagir, desvaloriza-se sempre como uma sequência vazia, porque foi a última vez

55
00:03:34,910 --> 00:03:40,460
que ele renderizou esse componente e o Delford descarregou o código X e, portanto, como entrada.

56
00:03:41,180 --> 00:03:46,220
Então, precisamos dizer para reagir que esse é um estado e que, quando ele muda, deve renderizar nosso J

57
00:03:46,220 --> 00:03:47,090
como código X.

58
00:03:47,990 --> 00:03:54,890
Então, novamente, podemos importá-lo como estado aqui e converter enter em texto, já usando a estrutura aqui e você afirma que

59
00:03:54,890 --> 00:04:00,080
é uma string vazia inicialmente ou tem uma string vazia inicialmente aqui porque estou gerenciando meu

60
00:04:00,080 --> 00:04:01,030
texto inserido.

61
00:04:01,370 --> 00:04:06,250
E o segundo elemento é uma função para atualizar o estado que, portanto, chamará o texto digitado no conjunto.

62
00:04:07,400 --> 00:04:14,690
E agora, aqui, a cada pressionamento de tecla, defino meu texto inserido para desvalorizar um valor de destino do evento.

63
00:04:15,050 --> 00:04:20,240
E aqui não precisamos dessa forma de função de atualização do estado, porque temos um novo valor

64
00:04:20,240 --> 00:04:22,160
que não depende do estado anterior.

65
00:04:22,430 --> 00:04:25,010
Assim, podemos apenas atualizar para definir assim.

66
00:04:25,940 --> 00:04:27,410
E agora isso vai.

67
00:04:28,880 --> 00:04:35,330
Renderize novamente esse componente sempre que digitarmos, sempre que chamarmos de conjunto, digitar ainda cada pressionamento de tecla, o que

68
00:04:35,360 --> 00:04:37,010
soa horrível, mas ótimo.

69
00:04:37,130 --> 00:04:37,550
Reagir.

70
00:04:37,550 --> 00:04:43,460
Faremos isso de uma maneira muito eficiente e, portanto, esse valor mais recente será refletido no elemento de

71
00:04:43,490 --> 00:04:43,850
entrada.

72
00:04:44,480 --> 00:04:51,230
E aqui no ADCO Handler, se quisermos atualizar, inserir, texto e redefini-lo, podemos definir, recuperar, definir, inserir texto e configurá-lo

73
00:04:51,440 --> 00:04:53,570
novamente para uma string vazia.

74
00:04:54,280 --> 00:04:56,960
E com isso agora temos o melhor dos dois mundos.

75
00:04:56,990 --> 00:04:59,300
Podemos inserir algo aqui que funcione.

76
00:04:59,570 --> 00:05:05,690
Mas também podemos manipulá-lo e redefinir depois de adicionar um novo objetivo como este.

77
00:05:06,590 --> 00:05:09,980
Portanto, este é agora e nunca um caso de uso para gerenciamento de estado.

78
00:05:10,100 --> 00:05:13,340
E é claro que existem muitos casos de uso em nosso aplicativo REACT.

79
00:05:13,940 --> 00:05:20,840
E aqui estamos usando o gerenciamento de estado para criar algo que às vezes também é chamado de ligação vinculativa, onde

80
00:05:21,290 --> 00:05:27,020
vincula o valor da entrada e a cada pressionamento de tecla que estamos atualizando para valor, que

81
00:05:27,020 --> 00:05:32,660
depois ligamos de volta à entrada para sempre refletir a valor mais recente dentro da entrada.

82
00:05:32,990 --> 00:05:36,560
Mas também somos capazes de gerenciar isso de uma maneira dirigida pelo estado.

83
00:05:36,770 --> 00:05:42,350
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

84
00:05:42,620 --> 00:05:43,910
volta na entrada nesse caso?

85
00:05:45,090 --> 00:05:50,550
Com isso, temos outro cenário de gestão do estado e agora podemos adicionar nossos próprios objetivos.