Quindi il pulsante Aggiungi qui chiama AddGoal e sostanzialmente inoltra l'obiettivo all'app. js che è esattamente ciò di cui abbiamo bisogno,
ma ciò che
dobbiamo anche fare è assicurarci che quando aggiungiamo un nuovo obiettivo, il modale venga chiuso.
Ora tieni presente che alla fine controlliamo la visibilità modale dall'interno dell'app. js file perché lì, abbiamo lo stato
isAddMode che stiamo cambiando quando facciamo clic su questo pulsante qui, ad esempio il pulsante Aggiungi
nuovo obiettivo
e questo valore di stato, isAddMode viene inoltrato all'input obiettivo dove lo utilizziamo per controllare la visibilità
di il modale.
Quindi, per essere sicuri che il modale scompaia, dobbiamo semplicemente cambiare
isAddMode di nuovo all'interno dell'app. js file perché il nuovo valore verrà automaticamente inoltrato all'input dell'obiettivo.
Quindi tutto ciò che dobbiamo fare è aggiungere il gestore degli obiettivi in cui impostiamo gli obiettivi del
corso, dobbiamo anche impostare isAddMode su false perché abbiamo finito di aggiungere. Ora una piccola nota a margine, il modo in cui React funziona
se si stanno impostando due stati uno dopo
l'altro, li raggrupperà insieme, non eseguirà
nuovamente il rendering del componente due volte dopo la prima modifica e dopo la seconda modifica, invece si applicherà sostanzialmente
tutti gli stati cambiano in una sola volta e rieseguono il rendering del componente solo una volta, il che
ovviamente
è positivo, altrimenti avremmo un ciclo di ri-rendering non necessario lì
e questa è semplicemente una bella ottimizzazione che React fa per noi. Quindi possiamo assolutamente cambiare due diversi stati uno dopo l'altro in
questo modo e con ciò,
il modale dovrebbe effettivamente sapere anche scomparire se lo impostiamo su falso. Proviamolo qui su
iOS.
Se aggiungo impara React Native qui, fai clic su Aggiungi, questo
scompare e ora imparo molto di più, funziona anche e posso
ancora eliminare elementi.
Ora per testarlo su Android, stessa procedura di prima, riavvialo
su Android, fai clic su
aggiungi nuovo obiettivo e impara qui React Native, fai clic su Aggiungi e questo lo
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
che abbiamo finito e inoltre, voglio fornire un pulsante Annulla, in modo che in alternativa invece
di aggiungere questo, potremmo anche annullare qui per chiudere il modale senza aggiungere un oggetto perché in
questo momento, non è qualcosa che possiamo fare.
Cominciamo con la cancellazione del nostro input
qui dopo aver inserito qualcosa. Per questo nell'input dell'obiettivo, alla fine, abbiamo
quell'obiettivo inserito
e dobbiamo reimpostarlo una volta aggiunto un nuovo obiettivo. Ora, naturalmente, aggiungiamo un nuovo obiettivo quando premiamo quel
pulsante Aggiungi e lì alla fine, attiviamo una funzione che otteniamo con l'aiuto del puntello onAddGoal.
Ora, per cancellare anche il nostro input, quello che possiamo fare qui è che possiamo
aggiungere una funzione all'interno del componente input goal, aggiungere goal handler o come vuoi
chiamarla, questa è una funzione che non deve prendere alcun argomento e alla fine, ora è questa funzione che
voglio attivare.
Quindi voglio innescare i gestori degli
obiettivi, quindi la mia funzione in questo componente. Ora qui, voglio chiamare oggetti di scena su AddGoal
senza legare qui, possiamo semplicemente chiamarlo in questo modo perché quando questa funzione viene eseguita, voglio eseguirla,
qui stiamo solo passando un puntatore a questa funzione senza
parentesi, quindi qui abbiamo non devono avere parentesi per non eseguire questa operazione troppo
presto, qui abbiamo assolutamente bisogno di parentesi perché funziona solo quando viene eseguita questa funzione
e cioè quando voglio attivare la funzione
nel mio componente genitore, quindi nel componente app qui. E qui su onAddGoal, ovviamente voglio ancora inoltrare qui
il
mio obiettivo inserito, quindi questo stato, voglio inoltrarlo ma, successivamente, voglio anche cancellarlo.
Quindi, imposterò nuovamente l'obiettivo
impostato su una stringa vuota che ripristinerà il testo immesso qui.
Quindi questa è
una cosa, l'altra è un pulsante che ci consente di chiudere questo e per questo, possiamo aggiungere un pulsante qui e
quel pulsante potrebbe avere un titolo di annullamento perché è
alla fine cosa dovrebbe fare questo
pulsante e
per l'annullamento pulsante, potrebbe essere bello non dover impostare il colore blu come predefinito
ma cambiare quel colore e puoi farlo aggiungendo qui il puntello colorato, ad
esempio potremmo impostarlo sul rosso qui perché il rosso secondo me è un bel colore per un annullamento pulsante.
Se lo salviamo e lo testiamo qui su iOS, vediamo
il pulsante Annulla e e
il pulsante Aggiungi e ora se imparo React Native qui e lo aggiungo, questo viene aggiunto e se lo
riapro, vedi che è stato cancellato e L'annullamento ovviamente non fa nulla perché abbiamo bisogno di connettere annulla al
componente dell'app dove controlliamo la visibilità controllando isAddMode.
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
molto lungo,
voglio solo essere chiaro su ciò che fa e quando viene chiamato.
Quindi qui, abbiamo il gestore aggiuntivo dell'obiettivo di annullamento e alla fine qui, possiamo semplicemente impostare
isAddMode su false che
chiuderà il modale e ovviamente
non stiamo facendo nient'altro, non stiamo cambiando i nostri obiettivi di corso perché abbiamo annullato
l'aggiunta e ora, possiamo inoltrarlo
all'elemento obiettivo, all'input obiettivo, quindi al nostro componente qui. Lì possiamo aggiungere il prop on onCancel, il nome di quel
prop ovviamente dipende da te perché è
il tuo prop sul tuo componente e ho inoltrato un puntatore su handler addizione annullamento
obiettivo su onCancel e ora all'interno dell'input obiettivo, possiamo trigger onCancel alla pressione di questo pulsante.
Quindi qui aggiungiamo onPress e vogliamo innescare oggetti di scena. onCancel qui, quindi la
funzione che stiamo ricevendo sul nostro prop onCancel. Detto questo, il pulsante Annulla dovrebbe funzionare, sì,
funziona bene.
Ora dovrebbe funzionare anche su Android
ovviamente, ma
per testarlo, stessa procedura di sempre, chiudiamolo
e riavvialo e, successivamente, vediamo se cancellare l'input funziona. Se entro o imparo React Native qui, faccio clic su Aggiungi, sì è
vuoto e annulla funziona anche.
Ora per quanto riguarda lo stile qui su Android, sarebbe bello avere un po 'di spazio tra
i pulsanti o in realtà su entrambe le piattaforme, forse avere questi pulsanti uno accanto all'altro.