Quindi si è parlato molto, sono state fatte molte cose, ora
è davvero il momento di far funzionare questo pulsante e di aggiungere un
obiettivo qui,
giusto e per questo dobbiamo scoprire cosa ha inserito l'utente e, successivamente, ovviamente ascoltare un tocco
sul pulsante e quindi aggiungere l'obiettivo immesso a una serie di obiettivi che dobbiamo gestire da qualche parte, che quindi possiamo
produrre laggiù in questa vista dal basso, giusto, è
quello che dobbiamo fare. Ora, in questo corso,
userò i componenti funzionali solo con la funzione di hook di React, che è relativamente nuova, quindi
nel caso in cui non conoscessi ancora hook di React, sicuramente prima imparerai su di essi, ad
esempio
nella mia guida completa di React, tratterò a fondo ma, in allegato, troverai anche alcune
altre risorse per iniziare con gli hook di React perché avremo bisogno degli hook di React per ottenere l'input dell'utente.
Abbiamo usato l'hook useState per quello che importiamo da React, non da React Native ma
da React, è una
caratteristica principale di React e quindi qui in questo componente funzionale, in questo componente dell'app, possiamo ottenere l'obiettivo inserito e anche
ottenere il set funzione obiettivo inserita per aggiornare lo stato con l'aiuto di useState e per impostazione predefinita, abbiamo uno stato
iniziale che è una stringa vuota perché l'utente non ha inserito nulla all'inizio.
Ora possiamo associarlo all'input di
testo, ciò significa che quando l'utente digita un carattere, vogliamo aggiornare il nostro stato e salvare
il testo inserito nello stato qui a cui possiamo accedere attraverso l'obiettivo inserito
e passeremo l'obiettivo inserito di nuovo nell'inserimento del testo. Questo è questo legame a due vie, è un cosiddetto componente controllato che conosci
anche da React per il web con normali elementi di input HTML.
Quindi qui possiamo ascoltare onChangeText, un supporto fornito dall'input di testo che accetta una funzione che verrà
eseguita per ogni sequenza di tasti.
Ora potremmo fornire una funzione in linea qui, ma possiamo anche impostare una funzione separata
per avere un po 'di un codice più pulito e puoi avere una funzione in una funzione
e dobbiamo averla qui, così possiamo usare il nostro stato o imposta qui la funzione obiettivo inserita, semplicemente aggiungendo una nuova funzione qui, il gestore input
obiettivo potrebbe essere un nome, ma il nome dipende da te. In quella funzione, otterremo automaticamente il testo inserito,
che verrà passato da React o da React Native qui e possiamo quindi chiamare l'obiettivo impostato e passare il
testo inserito come valore perché il testo inserito qui sarà già un stringa perché colleghiamo il
gestore di input dell'obiettivo a onChangeText semplicemente puntandolo qui. Ora è importante, non aggiungere parentesi lì perché questo
eseguirà questa funzione quando questo codice viene analizzato, quindi quando l'interfaccia utente viene
visualizzata per la prima volta. Tuttavia, non vuoi eseguirlo immediatamente, vuoi eseguirlo
ad ogni sequenza di tasti e quindi, prendi semplicemente il nome della funzione, passi il nome della funzione
a onChangeText e che effettivamente dice a React Native, hey, questo è il funzione che dovrei eseguire per
ogni sequenza di tasti, quindi non aggiungere parentesi qui in modo che questo possa essere eseguito su ogni sequenza di tasti.
Ora invece di questa sintassi di funzione, tu puoi anche usare una sintassi diversa che è
quella che userò durante il corso, dove crei una costante con quel nome qui e quindi il valore di
quella costante dopo il segno di uguale è semplicemente un utilizzando la sintassi della funzione freccia, quindi questo è il tuo elenco
di argomenti e questo è il corpo della funzione. Questa è la normale sintassi Javascript, è supportata dal
codice Javascript che React Native è in grado di eseguire e quindi questa è la sintassi
che userò, la connetti a onChangeText esattamente allo stesso modo di prima. Ok, quindi ora abbiamo questa funzione connessa, aggiorniamo il
nostro stato con qualunque cosa l'utente abbia inserito ad ogni sequenza
di tasti, ora dobbiamo anche restituire quel testo nell'input di testo, in modo che sia visualizzato correttamente legando semplicemente
la proprietà value a obiettivo inserito, quindi al nostro stato che cambierà ad ogni pressione di un tasto.
E con ciò, stiamo ottenendo l'accesso all'input dell'utente perché ora sarà
sempre memorizzato in un obiettivo inserito. Ora quando l'utente preme il pulsante, vogliamo usare quell'obiettivo
inserito, quindi per questo aggiungerò un'altra funzione qui, aggiungerò il gestore dell'obiettivo e questa è solo una convenzione di denominazione che
sto usando per queste funzioni qui, puoi nominarli come vuoi, qualunque cosa tu sia abituato dalle
tue app React, alla fine il nome della funzione dovrebbe semplicemente descrivere cosa sta per succedere e che qui gestirà
una pressione su quel pulsante che alla fine aggiungerà un obiettivo. Qui la funzione non accetterà alcun argomento ma nel corpo della funzione, voglio
aggiungere il mio obiettivo inserito a un elenco di obiettivi e non abbiamo ancora un elenco, quindi per ora
quello che faccio qui è il log della console, che è supportato in React Obiettivo nativo inserito in modo che almeno vediamo che questo
è stato salvato correttamente e che questa funzione viene eseguita. Affinché ciò avvenga, dobbiamo collegarlo al
pulsante, lì possiamo aggiungere il puntello onPress e puntare al gestore degli obiettivi di aggiunta,
di nuovo senza parentesi in modo che questo non venga eseguito immediatamente ma solo quando si verifica una stampa.
E ora salviamo tutto questo e torniamo indietro e forse entriamo per imparare React Native e la cosa buona è che puoi usare la tua vera
tastiera qui e premere aggiungi e dovresti vedere qui nel tuo terminale questo registro, vedrai anche questo a proposito nei tuoi strumenti
di sviluppo expo qui nella scheda del browser. Lì, se fai clic su uno dei
dispositivi collegati, quello in cui fai semplicemente clic sul pulsante nel mio
caso, il dispositivo Android, quindi lì in basso vedrai anche Learn React Native.
E ovviamente funziona anche su iOS, scopri tutto su React Native, se entriamo qui e facciamo clic su Aggiungi, allora vediamo anche
che si è registrati qui e vediamo anche che negli strumenti di sviluppo expo, se facciamo clic su iPhone in molto
in basso, vediamo questo registro. Va bene, quindi stiamo
ricevendo l'input dell'utente, lo stiamo memorizzando, lo stiamo registrando su console, ovviamente
non vogliamo consolarlo registrandolo, vogliamo invece inviarlo sotto il nostro input qui, vogliamo un elenco dei
nostri obiettivi al di sotto di questa area di input. Quindi, per questo, abbiamo bisogno di quella seconda vista qui che dovrebbe produrre il nostro elenco di articoli.
Quindi qui tra i tag di apertura e chiusura, voglio produrre tutti gli elementi che abbiamo
aggiunto, tutti gli obiettivi che abbiamo aggiunto. Per questo dobbiamo prima di tutto gestire i
nostri obiettivi e possiamo impostare un altro stato per quello che inizialmente è un array vuoto, quindi passo
un array vuoto come valore per usareState e lì abbiamo i nostri obiettivi di corso e obiettivi di corso stabiliti funzione.
Ora questi nomi dipendono sempre da te ma dovrebbero descrivere cosa c'è nel tuo stato e
come puoi aggiornarlo.
Quindi ora qui quando aggiungiamo un obiettivo, voglio aggiornare i miei obiettivi del corso per aggiungere il nuovo obiettivo
e per questo, posso chiamare gli obiettivi del corso impostati e ora impostare gli obiettivi del corso su un nuovo array in cui prendo i miei vecchi obiettivi del corso e aggiungo
un nuovo.
Ora questa è la sintassi che potresti non conoscere, è il
cosiddetto operatore spread, è una funzione Javascript che prende un array esistente e gli obiettivi del corso
è un array, è la nostra istantanea dello stato attuale prima dell'aggiornamento e ne estrae tutti gli elementi array e quindi li aggiunge qui a
un nuovo array, motivo per cui ho le parentesi quadre circostanti, senza queste parentesi quadre circostanti questo
non
funzionerebbe ma ora creiamo un nuovo array e aggiungiamo tutti gli elementi del vecchio array e ora possiamo
aggiungi anche un nuovo elemento.
Quindi qui, aggiungo una virgola per aggiungere
un ulteriore elemento dopo tutti gli elementi che sto estraendo qui e l'elemento che aggiungo qui è il mio obiettivo inserito, ovviamente.
Quindi ora aggiorniamo il nostro elenco di obiettivi con il vecchio elenco
di obiettivi, inizialmente un elenco vuoto ma poi questo aumenterà nel tempo perché aggiungiamo
anche un nuovo obiettivo quando premiamo quel pulsante. Ora una piccola nota a margine, quando si lavora con
gli obiettivi del corso impostati, gli obiettivi del corso qui sono il
nostro stato precedente e il modo in cui React aggiorna lo stato, questa dovrebbe essere sempre la tua istantanea dello
stato più attuale ma non è garantita al 100%, per avere quella garanzia
al 100% , quando aggiorni il tuo stato in base al vecchio stato, puoi utilizzare il modulo funzione di
questa
funzione set in cui non passi qui il valore del tuo nuovo stato ma invece lo passi in una funzione, in
genere una funzione anonima in cui ottieni il tuo stato attuale o gli obiettivi attuali, quindi l'istantanea dello stato corrente e
quindi restituisci il valore aggiornato, quindi qui restituisco il mio array aggiornato con quella sintassi della funzione freccia in linea in cui se
hai solo un'espressione, puoi omettere le parentesi graffe e il dichiarazione di ritorno e inserisci semplicemente
il valore che vuoi restituire e
verrà restituito e qui è tutto normale Javascript, niente di specifico di React Native.
Quindi qui prendo i miei obiettivi attuali e quindi aggiungo l'obiettivo inserito. Questa sintassi è un po 'migliore, anche l'altra sintassi
avrebbe funzionato, ma questo è garantito per funzionare sempre perché React Native andrà
sempre avanti e ti darà la garanzia, l'ultima istantanea dello stato prima che poi applichi il tuo cambio
di stato qui.
Ora è tutto carino, ora avremo un elenco, una serie di obiettivi gestiti qui. Come possiamo ora generare questo però?