1 00:00:02,330 --> 00:00:09,590 Quindi il pulsante Aggiungi qui chiama AddGoal e sostanzialmente inoltra l'obiettivo all'app. js che è esattamente ciò di cui abbiamo bisogno, 2 00:00:09,590 --> 00:00:10,860 ma ciò che 3 00:00:11,030 --> 00:00:16,660 dobbiamo anche fare è assicurarci che quando aggiungiamo un nuovo obiettivo, il modale venga chiuso. 4 00:00:16,700 --> 00:00:22,790 Ora tieni presente che alla fine controlliamo la visibilità modale dall'interno dell'app. js file perché lì, abbiamo lo stato 5 00:00:22,790 --> 00:00:29,690 isAddMode che stiamo cambiando quando facciamo clic su questo pulsante qui, ad esempio il pulsante Aggiungi 6 00:00:29,690 --> 00:00:31,050 nuovo obiettivo 7 00:00:31,220 --> 00:00:38,900 e questo valore di stato, isAddMode viene inoltrato all'input obiettivo dove lo utilizziamo per controllare la visibilità 8 00:00:38,900 --> 00:00:40,310 di il modale. 9 00:00:40,340 --> 00:00:46,580 Quindi, per essere sicuri che il modale scompaia, dobbiamo semplicemente cambiare 10 00:00:46,580 --> 00:00:52,270 isAddMode di nuovo all'interno dell'app. js file perché il nuovo valore verrà automaticamente inoltrato all'input dell'obiettivo. 11 00:00:52,310 --> 00:00:56,990 Quindi tutto ciò che dobbiamo fare è aggiungere il gestore degli obiettivi in cui impostiamo gli obiettivi del 12 00:00:56,990 --> 00:01:03,920 corso, dobbiamo anche impostare isAddMode su false perché abbiamo finito di aggiungere. Ora una piccola nota a margine, il modo in cui React funziona 13 00:01:03,920 --> 00:01:06,500 se si stanno impostando due stati uno dopo 14 00:01:06,590 --> 00:01:08,230 l'altro, li raggrupperà insieme, non eseguirà 15 00:01:08,270 --> 00:01:14,060 nuovamente il rendering del componente due volte dopo la prima modifica e dopo la seconda modifica, invece si applicherà sostanzialmente 16 00:01:14,060 --> 00:01:19,460 tutti gli stati cambiano in una sola volta e rieseguono il rendering del componente solo una volta, il che 17 00:01:19,460 --> 00:01:20,110 ovviamente 18 00:01:20,120 --> 00:01:23,240 è positivo, altrimenti avremmo un ciclo di ri-rendering non necessario lì 19 00:01:23,240 --> 00:01:29,960 e questa è semplicemente una bella ottimizzazione che React fa per noi. Quindi possiamo assolutamente cambiare due diversi stati uno dopo l'altro in 20 00:01:29,990 --> 00:01:31,760 questo modo e con ciò, 21 00:01:31,760 --> 00:01:38,740 il modale dovrebbe effettivamente sapere anche scomparire se lo impostiamo su falso. Proviamolo qui su 22 00:01:38,740 --> 00:01:40,430 iOS. 23 00:01:40,480 --> 00:01:46,320 Se aggiungo impara React Native qui, fai clic su Aggiungi, questo 24 00:01:46,420 --> 00:01:52,530 scompare e ora imparo molto di più, funziona anche e posso 25 00:01:52,530 --> 00:01:54,510 ancora eliminare elementi. 26 00:01:54,740 --> 00:01:58,910 Ora per testarlo su Android, stessa procedura di prima, riavvialo 27 00:01:59,060 --> 00:02:01,310 su Android, fai clic su 28 00:02:05,490 --> 00:02:11,840 aggiungi nuovo obiettivo e impara qui React Native, fai clic su Aggiungi e questo lo 29 00:02:11,850 --> 00:02:23,740 chiude, ora impariamo anche molto altro qui, come questo e anche questo funziona correttamente. Ora due piccoli miglioramenti che voglio ancora applicare, per uno voglio cancellare l'input una volta 30 00:02:23,740 --> 00:02:29,800 che abbiamo finito e inoltre, voglio fornire un pulsante Annulla, in modo che in alternativa invece 31 00:02:29,800 --> 00:02:36,550 di aggiungere questo, potremmo anche annullare qui per chiudere il modale senza aggiungere un oggetto perché in 32 00:02:36,610 --> 00:02:40,290 questo momento, non è qualcosa che possiamo fare. 33 00:02:40,300 --> 00:02:43,300 Cominciamo con la cancellazione del nostro input 34 00:02:43,300 --> 00:02:48,480 qui dopo aver inserito qualcosa. Per questo nell'input dell'obiettivo, alla fine, abbiamo 35 00:02:48,480 --> 00:02:49,530 quell'obiettivo inserito 36 00:02:49,560 --> 00:02:56,370 e dobbiamo reimpostarlo una volta aggiunto un nuovo obiettivo. Ora, naturalmente, aggiungiamo un nuovo obiettivo quando premiamo quel 37 00:02:56,370 --> 00:03:01,690 pulsante Aggiungi e lì alla fine, attiviamo una funzione che otteniamo con l'aiuto del puntello onAddGoal. 38 00:03:01,700 --> 00:03:07,110 Ora, per cancellare anche il nostro input, quello che possiamo fare qui è che possiamo 39 00:03:07,290 --> 00:03:12,440 aggiungere una funzione all'interno del componente input goal, aggiungere goal handler o come vuoi 40 00:03:12,560 --> 00:03:19,310 chiamarla, questa è una funzione che non deve prendere alcun argomento e alla fine, ora è questa funzione che 41 00:03:19,310 --> 00:03:20,270 voglio attivare. 42 00:03:20,300 --> 00:03:23,330 Quindi voglio innescare i gestori degli 43 00:03:23,360 --> 00:03:29,660 obiettivi, quindi la mia funzione in questo componente. Ora qui, voglio chiamare oggetti di scena su AddGoal 44 00:03:29,660 --> 00:03:35,630 senza legare qui, possiamo semplicemente chiamarlo in questo modo perché quando questa funzione viene eseguita, voglio eseguirla, 45 00:03:35,630 --> 00:03:39,340 qui stiamo solo passando un puntatore a questa funzione senza 46 00:03:39,340 --> 00:03:44,270 parentesi, quindi qui abbiamo non devono avere parentesi per non eseguire questa operazione troppo 47 00:03:44,270 --> 00:03:49,460 presto, qui abbiamo assolutamente bisogno di parentesi perché funziona solo quando viene eseguita questa funzione 48 00:03:49,460 --> 00:03:52,340 e cioè quando voglio attivare la funzione 49 00:03:52,340 --> 00:03:59,000 nel mio componente genitore, quindi nel componente app qui. E qui su onAddGoal, ovviamente voglio ancora inoltrare qui 50 00:03:59,000 --> 00:03:59,390 il 51 00:03:59,390 --> 00:04:03,770 mio obiettivo inserito, quindi questo stato, voglio inoltrarlo ma, successivamente, voglio anche cancellarlo. 52 00:04:04,010 --> 00:04:06,140 Quindi, imposterò nuovamente l'obiettivo 53 00:04:06,140 --> 00:04:10,930 impostato su una stringa vuota che ripristinerà il testo immesso qui. 54 00:04:10,970 --> 00:04:12,120 Quindi questa è 55 00:04:12,140 --> 00:04:18,770 una cosa, l'altra è un pulsante che ci consente di chiudere questo e per questo, possiamo aggiungere un pulsante qui e 56 00:04:18,950 --> 00:04:22,100 quel pulsante potrebbe avere un titolo di annullamento perché è 57 00:04:22,100 --> 00:04:23,990 alla fine cosa dovrebbe fare questo 58 00:04:23,990 --> 00:04:24,880 pulsante e 59 00:04:24,890 --> 00:04:29,410 per l'annullamento pulsante, potrebbe essere bello non dover impostare il colore blu come predefinito 60 00:04:29,420 --> 00:04:33,410 ma cambiare quel colore e puoi farlo aggiungendo qui il puntello colorato, ad 61 00:04:33,410 --> 00:04:39,250 esempio potremmo impostarlo sul rosso qui perché il rosso secondo me è un bel colore per un annullamento pulsante. 62 00:04:40,850 --> 00:04:44,960 Se lo salviamo e lo testiamo qui su iOS, vediamo 63 00:04:44,960 --> 00:04:47,540 il pulsante Annulla e e 64 00:04:47,690 --> 00:04:55,300 il pulsante Aggiungi e ora se imparo React Native qui e lo aggiungo, questo viene aggiunto e se lo 65 00:04:55,300 --> 00:05:02,830 riapro, vedi che è stato cancellato e L'annullamento ovviamente non fa nulla perché abbiamo bisogno di connettere annulla al 66 00:05:02,950 --> 00:05:06,280 componente dell'app dove controlliamo la visibilità controllando isAddMode. 67 00:05:07,330 --> 00:05:16,090 Quindi qui, possiamo anche aggiungere un altro gestore di funzioni nel componente dell'app ora, annullare il gestore di aggiunta obiettivo o qualcosa del genere, è un nome 68 00:05:16,120 --> 00:05:16,870 molto lungo, 69 00:05:16,870 --> 00:05:21,040 voglio solo essere chiaro su ciò che fa e quando viene chiamato. 70 00:05:21,040 --> 00:05:26,800 Quindi qui, abbiamo il gestore aggiuntivo dell'obiettivo di annullamento e alla fine qui, possiamo semplicemente impostare 71 00:05:26,800 --> 00:05:28,540 isAddMode su false che 72 00:05:29,050 --> 00:05:31,020 chiuderà il modale e ovviamente 73 00:05:31,030 --> 00:05:36,550 non stiamo facendo nient'altro, non stiamo cambiando i nostri obiettivi di corso perché abbiamo annullato 74 00:05:36,550 --> 00:05:38,590 l'aggiunta e ora, possiamo inoltrarlo 75 00:05:38,650 --> 00:05:45,580 all'elemento obiettivo, all'input obiettivo, quindi al nostro componente qui. Lì possiamo aggiungere il prop on onCancel, il nome di quel 76 00:05:45,580 --> 00:05:48,330 prop ovviamente dipende da te perché è 77 00:05:48,580 --> 00:05:53,710 il tuo prop sul tuo componente e ho inoltrato un puntatore su handler addizione annullamento 78 00:05:54,000 --> 00:05:59,480 obiettivo su onCancel e ora all'interno dell'input obiettivo, possiamo trigger onCancel alla pressione di questo pulsante. 79 00:05:59,500 --> 00:06:04,990 Quindi qui aggiungiamo onPress e vogliamo innescare oggetti di scena. onCancel qui, quindi la 80 00:06:04,990 --> 00:06:12,690 funzione che stiamo ricevendo sul nostro prop onCancel. Detto questo, il pulsante Annulla dovrebbe funzionare, sì, 81 00:06:12,770 --> 00:06:14,260 funziona bene. 82 00:06:14,510 --> 00:06:17,830 Ora dovrebbe funzionare anche su Android 83 00:06:17,900 --> 00:06:19,310 ovviamente, ma 84 00:06:19,310 --> 00:06:22,930 per testarlo, stessa procedura di sempre, chiudiamolo 85 00:06:22,940 --> 00:06:31,340 e riavvialo e, successivamente, vediamo se cancellare l'input funziona. Se entro o imparo React Native qui, faccio clic su Aggiungi, sì è 86 00:06:31,340 --> 00:06:33,330 vuoto e annulla funziona anche. 87 00:06:33,350 --> 00:06:38,300 Ora per quanto riguarda lo stile qui su Android, sarebbe bello avere un po 'di spazio tra 88 00:06:38,390 --> 00:06:43,150 i pulsanti o in realtà su entrambe le piattaforme, forse avere questi pulsanti uno accanto all'altro.