Quindi abbiamo trascorso un po 'di tempo sull'input ma la gestione dell'input dell'utente è importante,
vuoi farlo in un modo che sia naturale per l'utente, che
abbia un senso per
l'utente e dove non ti fiderai mai del tuo utente e convalidi sempre cosa l'utente entra e ci immergeremo
più a fondo in tutto questo processo di convalida,
input dell'utente che passerà le cose più avanti nel corso in cui accettiamo anche input più complessi
di un
numero semplice ma per ora, questo è stato un ottimo primo sguardo a come puoi modellare tale un input
e come puoi assicurarti di ottenere i dati di cui hai bisogno. Detto questo, non ti conosco ma penso che sia ora di progredire anche con
il nostro gioco perché siamo un po 'bloccati qui, questi
sono tutti passaggi importanti ma non stiamo davvero progredendo con il nostro gioco o con la nostra app qui .
Quindi assicuriamoci di farlo come prossimo passo e per questo, perché
non ci assicuriamo che i nostri pulsanti facciano qualcosa? Cominciamo con il pulsante di ripristino molto velocemente perché
sarà semplice. Quando lo
premi, ovviamente voglio semplicemente ripristinare il valore inserito. Quindi registrerò una nuova funzione lassù nel componente della
schermata di avvio del gioco, nominerò reset gestore di input e questa è solo la convenzione di denominazione
che mi piace, nomina queste funzioni che vengono attivate su un evento utente qualcosa di handler alla fine solo per farlo chiaro che
questi gestiscono determinati eventi, non è un
must, solo una preferenza che ho per le app React in generale e quindi anche per le app native
di React.
Questa sarà una funzione che quindi chiama imposta il valore immesso che è la nostra funzione di impostazione dello
stato qui per aggiornare lo stato che inseriamo di nuovo nell'input e impostarlo su
una stringa vuota e sì, con ciò possiamo collegarlo al pulsante di ripristino qui, onPress ora dovrebbe semplicemente eseguire il gestore
di input di reset in questo modo.
Facciamo
una prova veloce, inseriamo qualcosa qui,
ripristiniamo e non
c'è più, sta andando
bene e
assicuriamoci che questo pulsante qui, il pulsante di conferma faccia qualcosa. Per questo, aggiungerò un altro pulsante, confermerò il gestore di input e potremmo semplicemente iniziare il
gioco immediatamente qui, ma anche solo per esercitarmi, voglio dare
all'utente un'ultima possibilità di cambiare la sua scelta, quindi qui voglio solo gentile di output a questa è la tua scelta, vuoi iniziare un
messaggio, dove
poi l'utente ottiene un pulsante per iniziare il gioco, solo un ulteriore passo in modo che abbiamo un po
'di pratica in più qui. Per questo, aggiungerò
un nuovo stato che gestisce l'utente ha ancora confermato lo stato e inizialmente, è falso ma ovviamente possiamo cambiarlo
e vogliamo essere in grado di ottenere lo stato corrente.
Quindi qui otteniamo se l'utente ha confermato o no e possiamo
impostare questo stato confermato con quel secondo elemento nell'array che stiamo estraendo. Quindi laggiù nel gestore di input di
conferma, ho impostato confirm su true, sul gestore di input di reset a proposito, ho impostato questo su false perché se
l'utente fa clic su reset, l'utente deve certamente confermare i valori, quindi dovremmo ripristinare questo
e quindi qui nel gestore di input di conferma,
voglio anche fare due cose diverse, altre due cose.
Uno viene ripristinato il valore inserito ma ovviamente salva anche il valore inserito come valore con il quale
avremmo iniziato il gioco.
Possiamo farlo con l'ennesimo
stato che stiamo gestendo che inizialmente non contiene nulla, non ha alcun valore, inizialmente non definito perché dovrebbe essere il
numero selezionato e ora dovrebbe essere anche un numero e non un testo.
Quindi qui abbiamo il numero selezionato e una funzione per
impostarlo e quando l'utente ha fatto clic su Conferma prima di reimpostare il mio valore inserito, anche se questo qui sarà comunque
raggruppato in modo da poter utilizzare il valore inserito dopo averlo impostato su un valore stringa vuota perché
ciò avverrà solo nel prossimo ciclo di rendering e non immediatamente dopo l'esecuzione di questa riga.
Quindi possiamo ancora eseguire o accedere in sicurezza a questo valore inserito da allora in
poi se lo vogliamo perché qui, voglio impostare il mio valore inserito con parseInt passando il valore inserito, quindi ho impostato questo come il mio numero selezionato e, ancora, posso ancora
accedere valore inserito qui
anche se lo ripristiniamo perché questa cosa di ripristino qui verrà sostanzialmente messa in coda da React
e verrà elaborata solo la volta successiva in cui il componente viene visualizzato in seguito e
queste
tre modifiche di stato vengono tutte raggruppate insieme per dare luogo a un ciclo di rendering, quindi noi possiamo accedere in
modo sicuro al valore inserito qui, ma possiamo anche semplicemente farlo prima
di ripristinarlo, non importa.
La cosa importante è tuttavia che analizziamo questo come un numero intero in modo da convertire questo testo in un
numero qui e in realtà, aggiungerò ancora un altro passaggio prima di farlo. All'inizio, avrò qui il mio numero scelto che è
quel numero analizzato e prima di fare
qualsiasi cosa, voglio verificare se il numero scelto non è un numero che è un valore Javascript predefinito, quindi se in
qualche modo non è ancora un numero anche se stiamo cercando di verificare la presenza di caratteri non validi o
se il numero scelto è più piccolo o uguale a zero.
Se lo è, allora voglio solo tornare,
non voglio
continuare, quindi return finirà l'esecuzione della funzione e non confermerà, non lo utilizzerà come valore
perché il valore non è
valido, sono ammessi solo numeri positivi e non sono ammessi numeri non validi.
Inoltre, voglio anche aggiungere un ulteriore controllo e verificare se il numero scelto potrebbe essere maggiore di 99 perché anche questo
non sarebbe consentito, voglio avere un
numero compreso tra 1 e 99 e dovrebbe essere un numero. Se non soddisfa questi criteri, quindi torneremo, ora altrimenti
imposteremo questo numero scelto come numero selezionato e quindi reimposteremo l'input e quindi queste tre chiamate di stato
impostate verranno raggruppate e il componente verrà nuovamente visualizzato e avremo il nostro nuovo stato
che ha preso in considerazione questo numero come numero selezionato. Quindi ora possiamo collegare il gestore di input di conferma al
pulsante di conferma qui e ora alcuni feedback visivi sarebbero anche belli vedere che la
conferma ha funzionato o anche ottenere un errore se abbiamo violato una di queste regole qui, in modo da non limitarci ritorna
ma mostra anche un avviso.
Ora forse iniziamo con il feedback prima di procedere con l'avviso. Per il feedback, qui sotto
questa funzione ma all'interno del nostro componente funzionale, voglio verificare se abbiamo confermato e quindi impostare alcuni
contenuti speciali che dovrebbero essere emessi.
Quindi qui abbiamo l'output confermato che normalmente non
è definito ma se lo abbiamo confermato, l'output confermato è un codice jsx in cui riassumiamo ciò che l'utente ha
inserito e forniamo all'utente il pulsante di avvio del gioco.
Ora solo per vedere se funziona, andiamo con un po 'di testo qui e diciamo solo il numero scelto e
produciamo il numero selezionato qui, il numero selezionato, questo
è il nostro stato che stiamo gestendo qui.
Quindi, dal momento che chiamiamo set confermato e così via, il componente eseguirà nuovamente il rendering
quando viene scelto, quindi l'intera funzione del componente verrà eseguita di nuovo e ciò significa
che confermato sarà quindi vero per la prossima esecuzione perché lo impostiamo su vero
qui
e pertanto imposteremo l'output confermato come quel testo e ora possiamo aggiungere l'output confermato, diciamo qui sotto la nostra scheda.
Quindi lì voglio produrre l'output confermato e questo non è definito,
non
stampa nulla sullo schermo o è questo testo. Con quello salvato se torniamo indietro e inserisco il numero e lo confermo qui, vediamo il
numero.
Se inserisco qualcosa di non valido come zero, non
lo vediamo, quindi il nostro controllo sembra funzionare e viene comunque emesso un numero valido.
Questo non è il progetto finale che voglio avere, ma ciò dimostra che funziona.
Prima di finalizzare questo progetto, assicuriamoci di mostrare anche un avviso se viene inserito qualcosa di non valido.