1
00:00:02,330 --> 00:00:09,590
Assim, o botão de adição aqui chama onAddGoal e isso basicamente encaminha a meta para o aplicativo. js que é exatamente o que precisamos, mas o

2
00:00:09,590 --> 00:00:10,860
que também precisamos

3
00:00:11,030 --> 00:00:16,660
fazer é ter certeza de que quando adicionamos um novo objetivo, o modal é fechado.

4
00:00:16,700 --> 00:00:22,790
Agora lembre-se de que, no final, controlamos a visibilidade modal de dentro do aplicativo. arquivo js porque lá, temos o estado

5
00:00:22,790 --> 00:00:29,690
isAddMode que estamos mudando quando clicamos nesse botão aqui, o botão adicionar novo objetivo por exemplo

6
00:00:29,690 --> 00:00:31,050
e esse

7
00:00:31,220 --> 00:00:38,900
valor de estado, isAddMode é encaminhado para a entrada do objetivo, onde o usamos para controlar a visibilidade

8
00:00:38,900 --> 00:00:40,310
de o modal.

9
00:00:40,340 --> 00:00:46,580
Portanto, para garantir que o modal desapareça, basta alterar isAddMode

10
00:00:46,580 --> 00:00:52,270
novamente dentro do aplicativo. arquivo js porque o novo valor será automaticamente encaminhado para a entrada do objetivo.

11
00:00:52,310 --> 00:00:56,990
Então, tudo o que precisamos fazer é adicionar o gerenciador de metas, onde definimos as metas do

12
00:00:56,990 --> 00:01:03,920
curso, também temos que definir isAddMode como false, porque terminamos de adicionar. Agora, uma pequena nota lateral, a maneira como o React funciona se

13
00:01:03,920 --> 00:01:06,500
você estiver definindo dois estados um após o

14
00:01:06,590 --> 00:01:08,230
outro, ele agrupará esses dois, ele

15
00:01:08,270 --> 00:01:14,060
não renderizará novamente o componente duas vezes após a primeira alteração e após a segunda alteração. todas as mudanças

16
00:01:14,060 --> 00:01:19,460
de estado de uma só vez e apenas re-renderizar o componente uma vez, o que obviamente é bom,

17
00:01:19,460 --> 00:01:20,110
caso

18
00:01:20,120 --> 00:01:23,240
contrário teríamos um ciclo desnecessário de re-render lá e isso

19
00:01:23,240 --> 00:01:29,960
é simplesmente uma ótima otimização que o React faz para nós. Assim, podemos absolutamente alterar dois estados diferentes um após o outro

20
00:01:29,990 --> 00:01:31,760
assim e, com isso, o

21
00:01:31,760 --> 00:01:38,740
modal deve saber, na verdade, também desaparecer se definirmos isso como falso. Vamos testá-lo aqui no

22
00:01:38,740 --> 00:01:40,430
iOS.

23
00:01:40,480 --> 00:01:46,320
Se eu adicionar Learn React Native aqui, clique em add, isso

24
00:01:46,420 --> 00:01:52,530
desaparece e agora aprende muito mais, isso também funciona e eu ainda

25
00:01:52,530 --> 00:01:54,510
posso excluir itens.

26
00:01:54,740 --> 00:01:58,910
Agora para testar isso no Android, mesmo procedimento que antes,

27
00:01:59,060 --> 00:02:01,310
vamos realmente reiniciar isso no

28
00:02:05,490 --> 00:02:11,840
Android, clicar em adicionar novo objetivo e aprender Reagir Nativo aqui, clicar em adicionar e

29
00:02:11,850 --> 00:02:23,740
isso fecha, agora vamos aprender muito mais aqui, assim e isso também funciona corretamente. Agora, duas melhorias minúsculas que eu ainda quero aplicar, por exemplo, quero limpar a entrada

30
00:02:23,740 --> 00:02:29,800
assim que terminar e, além disso, quero fornecer um botão de cancelamento, para que, alternativamente,

31
00:02:29,800 --> 00:02:36,550
em vez de adicionar isso, possamos cancelar aqui para fechar o modal sem adicionar um item porque,

32
00:02:36,610 --> 00:02:40,290
agora, isso não é algo que podemos fazer.

33
00:02:40,300 --> 00:02:43,300
Vamos começar limpando nossa entrada aqui

34
00:02:43,300 --> 00:02:48,480
depois que entramos em algo. Para isso, na entrada de meta, no final,

35
00:02:48,480 --> 00:02:49,530
temos essa

36
00:02:49,560 --> 00:02:56,370
meta inserida e precisamos redefinir isso quando adicionarmos uma nova meta. Agora, é claro, adicionamos um novo objetivo quando pressionamos esse

37
00:02:56,370 --> 00:03:01,690
botão de adição e, ao final, acionamos uma função que obtemos com a ajuda do prop da onAddGoal.

38
00:03:01,700 --> 00:03:07,110
Agora, para limpar nossa entrada, o que podemos fazer aqui é adicionar uma função dentro do

39
00:03:07,290 --> 00:03:12,440
componente de entrada do objetivo, adicionar manipulador de meta ou o que você quiser

40
00:03:12,560 --> 00:03:19,310
chamá-lo, essa é uma função que não precisa aceitar nenhum argumento e no final, agora é essa função que eu

41
00:03:19,310 --> 00:03:20,270
quero acionar.

42
00:03:20,300 --> 00:03:23,330
Então eu quero acionar adicionar manipuladores

43
00:03:23,360 --> 00:03:29,660
de metas, então minha própria função neste componente. Agora aqui, eu quero chamar props onAddGoal sem

44
00:03:29,660 --> 00:03:35,630
bind aqui, podemos apenas chamá-lo assim porque quando esta função é executada, eu quero executá-la, aqui estamos

45
00:03:35,630 --> 00:03:39,340
apenas passando um ponteiro para essa função sem parênteses, então

46
00:03:39,340 --> 00:03:44,270
aqui nós não deve ter parênteses para não executar isso muito cedo, aqui nós

47
00:03:44,270 --> 00:03:49,460
absolutamente precisamos de parênteses porque isso só é executado quando esta função é executada e

48
00:03:49,460 --> 00:03:52,340
é quando eu quero acionar a função

49
00:03:52,340 --> 00:03:59,000
no meu componente pai, portanto, no componente app aqui. E aqui para onAddGoal, é claro que ainda quero encaminhar

50
00:03:59,000 --> 00:03:59,390
minha

51
00:03:59,390 --> 00:04:03,770
meta inserida aqui, então, nesse estado, quero encaminhar isso, mas depois disso, também quero limpá-lo.

52
00:04:04,010 --> 00:04:06,140
Então, a partir de então, configurarei

53
00:04:06,140 --> 00:04:10,930
a meta inserida para uma string vazia novamente, o que redefinirá o texto que inserimos aqui.

54
00:04:10,970 --> 00:04:12,120
Então, isso é uma

55
00:04:12,140 --> 00:04:18,770
coisa, a outra coisa é um botão que nos permite fechar isso e para isso, podemos adicionar um botão aqui e esse

56
00:04:18,950 --> 00:04:22,100
botão pode ter um título de cancelamento porque é no

57
00:04:22,100 --> 00:04:23,990
final o que esse botão deve

58
00:04:23,990 --> 00:04:24,880
fazer e

59
00:04:24,890 --> 00:04:29,410
pelo cancelamento botão, pode ser bom não ter que usar a cor azul padrão, mas

60
00:04:29,420 --> 00:04:33,410
mudar essa cor e você pode fazer isso adicionando a cor prop aqui,

61
00:04:33,410 --> 00:04:39,250
por exemplo, podemos definir isso para vermelho aqui porque vermelho na minha opinião é uma cor agradável para cancelar botão.

62
00:04:40,850 --> 00:04:44,960
Se salvarmos isso e testarmos isso aqui no iOS, vemos o

63
00:04:44,960 --> 00:04:47,540
botão cancelar e o botão Adicionar

64
00:04:47,690 --> 00:04:55,300
e agora se eu aprender Reagir Nativo aqui e eu adicionar isso, isso é adicionado e se eu reabrir isso,

65
00:04:55,300 --> 00:05:02,830
você vê que foi limpo e O cancelamento, claro, não faz nada, porque precisamos conectar o cancelamento ao componente do

66
00:05:02,950 --> 00:05:06,280
aplicativo, onde controlamos a visibilidade, controlando o isAddMode.

67
00:05:07,330 --> 00:05:16,090
Então, aqui, nós também podemos adicionar outro manipulador de função no componente de aplicativo agora, cancelar o manipulador de adição de meta ou algo assim, é um nome muito

68
00:05:16,120 --> 00:05:16,870
longo, eu

69
00:05:16,870 --> 00:05:21,040
só quero ser claro sobre o que isso faz e quando é chamado.

70
00:05:21,040 --> 00:05:26,800
Então, aqui, temos o manipulador adicional de meta de cancelamento e, no final, aqui, podemos simplesmente definir

71
00:05:26,800 --> 00:05:28,540
isAddMode como false, o

72
00:05:29,050 --> 00:05:31,020
que fechará o modal e, claro,

73
00:05:31,030 --> 00:05:36,550
não estamos fazendo mais nada, não estamos alterando nossas metas porque cancelamos a adição e agora, podemos

74
00:05:36,550 --> 00:05:38,590
encaminhar isso para o item de

75
00:05:38,650 --> 00:05:45,580
meta, para entrada de meta, para o nosso componente aqui. Aí podemos adicionar onCancel prop, o nome do prop é claro

76
00:05:45,580 --> 00:05:48,330
cabe a você, porque é o seu próprio

77
00:05:48,580 --> 00:05:53,710
prop em seu próprio componente e eu tenho um ponteiro para cancelar o manipulador de adição

78
00:05:54,000 --> 00:05:59,480
de meta para onCancel e agora dentro da entrada de meta, podemos trigger onCancel após pressionar este botão.

79
00:05:59,500 --> 00:06:04,990
Então, aqui, adicionamos onPress e queremos acionar adereços. onCancel aqui, então a

80
00:06:04,990 --> 00:06:12,690
função que estamos recebendo em nosso suporte onCancel. Com isso, o botão de cancelamento deve funcionar, sim

81
00:06:12,770 --> 00:06:14,260
funciona muito bem.

82
00:06:14,510 --> 00:06:17,830
Agora também deve funcionar no Android, claro, mas

83
00:06:17,900 --> 00:06:19,310
para testá-lo, o

84
00:06:19,310 --> 00:06:22,930
mesmo procedimento de sempre, vamos fechá-lo e reiniciá-lo e,

85
00:06:22,940 --> 00:06:31,340
a partir daí, vamos ver se a limpeza da entrada funciona. Se eu inserir ou aprender React Native aqui, clique em add, yes is

86
00:06:31,340 --> 00:06:33,330
empty e cancel also works.

87
00:06:33,350 --> 00:06:38,300
Agora, com relação ao estilo aqui no Android, seria interessante ter algum espaçamento entre os botões

88
00:06:38,390 --> 00:06:43,150
ou, na verdade, nas duas plataformas, talvez esses botões fiquem ao lado um do outro.