1
00:00:02,350 --> 00:00:06,760
Por isso, passamos algum tempo na entrada, mas lidar com a entrada do usuário é

2
00:00:06,760 --> 00:00:09,970
importante, você deseja fazê-lo de uma maneira que pareça natural

3
00:00:09,970 --> 00:00:11,470
para o usuário, que

4
00:00:11,590 --> 00:00:17,000
faça sentido para o usuário e onde você nunca confie no usuário e sempre valide o que o

5
00:00:17,020 --> 00:00:19,750
usuário entra e vamos nos aprofundar em toda essa

6
00:00:19,750 --> 00:00:24,760
validação, as entradas do usuário entregando as coisas mais tarde no curso, onde também aceitamos entradas mais

7
00:00:24,760 --> 00:00:25,520
complexas do

8
00:00:25,540 --> 00:00:31,030
que um número simples, mas, por enquanto, essa foi uma ótima primeira olhada em como você pode estilizar

9
00:00:31,210 --> 00:00:37,910
tais uma entrada e como você pode obter os dados necessários. Com isso, eu não sei sobre você, mas acho que é hora de progredir

10
00:00:37,920 --> 00:00:40,710
também com o nosso jogo, porque estamos meio que presos aqui,

11
00:00:40,710 --> 00:00:45,600
essas são etapas importantes, mas não estamos realmente progredindo com o nosso jogo ou com o nosso aplicativo aqui .

12
00:00:45,600 --> 00:00:49,520
Então, vamos garantir que faremos isso como um próximo passo e, para isso,

13
00:00:49,530 --> 00:00:56,690
por que não garantimos que nossos botões façam alguma coisa? Vamos começar com o botão de reset bem rápido, porque isso

14
00:00:56,690 --> 00:00:58,760
será simples. Quando você pressiona,

15
00:00:58,790 --> 00:01:04,400
é claro que simplesmente desejo redefinir o valor digitado. Então, registrarei uma nova função lá no componente da

16
00:01:04,410 --> 00:01:10,310
tela inicial do jogo, nomeie-a como redefinir o manipulador de entrada e essa é apenas a convenção de

17
00:01:10,310 --> 00:01:17,450
nomes que eu gosto, nomeie essas funções que são acionadas em um evento do usuário, manipulador de algo no final, apenas para torná-lo

18
00:01:17,450 --> 00:01:19,840
claro que eles lidam com determinados eventos,

19
00:01:19,970 --> 00:01:26,210
isso não é obrigatório, apenas uma preferência que tenho pelos aplicativos React em geral e, portanto, também pelos aplicativos

20
00:01:26,210 --> 00:01:27,040
React Native.

21
00:01:27,260 --> 00:01:34,040
Essa será uma função que chama o valor inserido definido, que é a nossa função de configuração de

22
00:01:34,220 --> 00:01:39,370
estado aqui para atualizar o estado que retornamos à entrada e configurá-lo para uma

23
00:01:39,460 --> 00:01:46,690
string vazia e, sim, com isso podemos conectar isso ao botão de reset aqui, O onPress agora deve simplesmente executar

24
00:01:46,700 --> 00:01:49,540
o manipulador de entrada de redefinição assim.

25
00:01:49,700 --> 00:01:50,780
Vamos

26
00:01:50,780 --> 00:01:53,760
tentar rapidamente, digitar algo aqui, redefinir

27
00:01:53,780 --> 00:01:55,110
e desaparecer, está

28
00:01:55,310 --> 00:01:57,440
com boa aparência e

29
00:01:57,470 --> 00:01:58,790
também certifique-se

30
00:01:58,790 --> 00:02:09,390
de que este botão aqui, o botão confirmar, faça alguma coisa. Para isso, adicionarei outro botão, confirmo o manipulador de entrada e poderíamos simplesmente iniciar o jogo

31
00:02:09,420 --> 00:02:12,600
imediatamente aqui, mas também para praticar isso, quero dar

32
00:02:12,600 --> 00:02:20,030
ao usuário uma chance final de mudar sua escolha, então aqui só quero digitar da saída a essa é sua escolha, você

33
00:02:20,200 --> 00:02:21,090
deseja iniciar

34
00:02:21,090 --> 00:02:27,050
a mensagem, onde o usuário recebe um botão para iniciar o jogo, apenas uma etapa extra, para que

35
00:02:27,360 --> 00:02:30,910
tenhamos alguma prática extra aqui. Para isso, adicionarei

36
00:02:30,930 --> 00:02:38,800
um novo estado que gerencia o estado confirmado pelo usuário e, inicialmente, isso é falso, mas é claro que

37
00:02:38,910 --> 00:02:43,020
podemos mudar isso e queremos poder obter o estado atual.

38
00:02:43,020 --> 00:02:45,980
Então, aqui vamos saber se o usuário confirmou ou não e

39
00:02:45,990 --> 00:02:52,410
podemos definir esse estado confirmado com o segundo elemento na matriz que estamos extraindo. Então, lá em baixo, no manipulador de entrada

40
00:02:52,410 --> 00:03:00,160
de confirmação, defino confirmar como verdadeiro, no manipulador de entrada de redefinição, a propósito, defino-o como falso porque se o usuário clicar

41
00:03:00,160 --> 00:03:05,710
em redefinir, o usuário certamente precisará confirmar os valores para que possamos redefinir isso e,

42
00:03:05,710 --> 00:03:09,110
em seguida, aqui no manipulador de entrada de confirmação,

43
00:03:09,160 --> 00:03:12,750
eu também quero fazer duas coisas diferentes, duas outras coisas.

44
00:03:12,880 --> 00:03:20,530
Um é redefinir o valor inserido, mas também, é claro, salvar o valor inserido como o valor com o

45
00:03:20,530 --> 00:03:22,300
qual iniciaríamos o jogo.

46
00:03:22,390 --> 00:03:24,840
Podemos fazer isso com outro

47
00:03:24,880 --> 00:03:34,430
estado que estamos gerenciando, que inicialmente não possui nada, não tem valor, é indefinido inicialmente, porque esse deve ser o número

48
00:03:34,430 --> 00:03:40,370
selecionado e agora também deve ser realmente um número e não algum texto.

49
00:03:40,910 --> 00:03:44,400
Portanto, aqui temos o número selecionado e uma função para

50
00:03:44,480 --> 00:03:51,560
defini-lo e quando o usuário clicou em confirmar antes de redefinir meu valor digitado, embora todos aqui sejam agrupados de qualquer maneira, para

51
00:03:51,610 --> 00:03:57,290
que também possamos usar o valor digitado aqui depois de defini-lo como um valor string vazia porque isso

52
00:03:57,470 --> 00:04:02,540
será feito apenas no próximo ciclo de renderização e não imediatamente após a execução desta linha.

53
00:04:02,540 --> 00:04:07,530
Portanto, ainda podemos executar ou acessar com segurança esse valor inserido posteriormente, se

54
00:04:07,730 --> 00:04:17,930
quisermos, porque aqui, eu quero definir meu valor inserido com parseInt, passando o valor inserido, portanto, defino-o como meu número selecionado e, novamente, ainda posso acessar inserimos

55
00:04:18,050 --> 00:04:19,300
o valor aqui,

56
00:04:19,340 --> 00:04:24,980
embora o redefinamos porque essa coisa de redefinição aqui será basicamente enfileirada pelo React e

57
00:04:25,190 --> 00:04:30,740
só será processada na próxima vez que o componente for renderizado posteriormente e essas

58
00:04:30,740 --> 00:04:31,480
três

59
00:04:31,580 --> 00:04:38,660
alterações de estado forem agrupadas em lotes para resultar em um ciclo de renderização. pode acessar com segurança o

60
00:04:38,660 --> 00:04:42,850
valor digitado aqui, mas também podemos simplesmente fazê-lo antes de redefini-lo,

61
00:04:42,860 --> 00:04:44,200
isso não importa.

62
00:04:44,210 --> 00:04:49,520
O importante é, no entanto, que analisemos isso como um número inteiro para convertermos esse texto em um número

63
00:04:49,520 --> 00:04:57,050
aqui e, na verdade, adicionarei mais uma etapa extra antes de fazer isso. Logo no início, terei meu número escolhido aqui, que

64
00:04:57,140 --> 00:05:00,410
é o número analisado e, antes

65
00:05:00,410 --> 00:05:08,660
de fazer qualquer coisa, quero verificar se o número escolhido não é um número que é um valor Javascript padrão,

66
00:05:08,660 --> 00:05:16,550
portanto, se de alguma forma ainda não é um número número, mesmo que estejamos tentando verificar caracteres inválidos ou

67
00:05:16,550 --> 00:05:20,730
se o número escolhido é menor ou igual a zero.

68
00:05:21,200 --> 00:05:24,140
Se for, então eu só quero retornar,

69
00:05:24,140 --> 00:05:25,430
não quero

70
00:05:25,460 --> 00:05:31,580
continuar, então return retornará a execução da função e não confirmará, não usará isso como

71
00:05:31,850 --> 00:05:33,710
um valor porque o valor

72
00:05:33,830 --> 00:05:39,010
é inválido, apenas números positivos são permitidos e nenhum número inválido é permitido.

73
00:05:39,020 --> 00:05:46,340
Além disso, também quero adicionar uma verificação extra e verificar se o número escolhido talvez seja maior que 99, porque isso

74
00:05:46,350 --> 00:05:48,770
também não seria permitido, quero ter

75
00:05:48,770 --> 00:05:56,600
um número entre 1 e 99 e deve ser um número. Se não estiver de acordo com esse critério, retornaremos; agora,

76
00:05:56,840 --> 00:06:03,740
caso contrário, definiremos esse número escolhido como o número selecionado e, em seguida, redefiniremos a entrada e, em seguida, essas

77
00:06:03,740 --> 00:06:09,440
três chamadas de estado definido serão agrupadas em lotes e o componente será renderizado novamente. teremos nosso

78
00:06:09,440 --> 00:06:17,790
novo estado que leva esse número em consideração como o número selecionado. Portanto, agora podemos conectar o manipulador de entrada de confirmação

79
00:06:17,790 --> 00:06:23,700
ao botão de confirmação aqui e agora algum feedback visual também seria bom em

80
00:06:23,700 --> 00:06:32,220
verificar que a confirmação funcionou ou também obter um erro se violarmos uma dessas regras aqui, para que não apenas retornar,

81
00:06:32,220 --> 00:06:34,440
mas também mostrar um alerta.

82
00:06:35,320 --> 00:06:41,870
Agora vamos começar com o feedback antes de trabalharmos no alerta. Para o feedback, aqui abaixo

83
00:06:42,650 --> 00:06:51,710
desta função, mas dentro do nosso componente funcional, quero verificar se confirmamos e depois definir algum

84
00:06:51,710 --> 00:06:54,990
conteúdo especial que deve ser produzido.

85
00:06:55,010 --> 00:06:58,900
Então aqui temos a saída confirmada, que normalmente

86
00:06:58,970 --> 00:07:07,340
é indefinida, mas se tivermos confirmado, a saída confirmada é um código jsx, onde resumimos o que o usuário

87
00:07:07,340 --> 00:07:11,330
digitou e fornecemos ao usuário o botão Iniciar jogo.

88
00:07:11,330 --> 00:07:18,990
Agora, apenas para ver se funciona, vamos com um texto aqui e digamos o número escolhido e o

89
00:07:19,020 --> 00:07:22,470
número selecionado aqui, o número selecionado, esse é

90
00:07:22,470 --> 00:07:25,700
o estado que estamos gerenciando aqui.

91
00:07:25,770 --> 00:07:32,100
Portanto, como chamamos conjunto confirmado e assim por diante, o componente será renderizado novamente quando escolhido,

92
00:07:32,100 --> 00:07:38,010
portanto, toda essa função do componente será executada novamente e isso significa que o confirmado

93
00:07:38,040 --> 00:07:43,470
será verdadeiro para a próxima execução, porque nós o definimos como verdadeiro aqui e

94
00:07:43,500 --> 00:07:44,310
portanto,

95
00:07:44,310 --> 00:07:51,820
definiremos a saída confirmada como esse texto e agora podemos adicionar a saída confirmada, digamos aqui abaixo do cartão.

96
00:07:51,820 --> 00:07:57,340
Então, lá eu quero produzir a saída confirmada e isso é indefinido,

97
00:07:57,340 --> 00:07:57,940
não

98
00:07:58,060 --> 00:08:05,900
imprime nada na tela ou é este texto. Com isso salvo, se voltarmos e eu inserir o número e confirmar aqui, vemos o

99
00:08:05,900 --> 00:08:06,410
número.

100
00:08:06,950 --> 00:08:10,210
Se eu digitar algo inválido como zero, não

101
00:08:10,250 --> 00:08:15,360
o veremos, portanto nossa verificação parece funcionar e um número válido é emitido.

102
00:08:15,400 --> 00:08:19,200
Agora, esse não é o design final que eu quero ter, mas prova que funciona.

103
00:08:19,390 --> 00:08:26,170
Antes de finalizarmos esse design, verifique se também mostramos um alerta se algo inválido for inserido.