1 00:00:02,180 --> 00:00:04,700 Lo stato è un concetto cruciale nella reazione. 2 00:00:05,060 --> 00:00:10,820 E con la nostra conoscenza dello stato, ora possiamo anche assicurarci di non creare solo un obiettivo fittizio, 3 00:00:10,940 --> 00:00:13,640 ma in realtà rispecchiamo il reale input dell'utente. 4 00:00:14,060 --> 00:00:15,740 Quindi, torniamo al nuovo obiettivo. 5 00:00:16,280 --> 00:00:24,860 Quello che vuoi fare è che vogliamo memorizzare l'input dell'utente in una variabile su ogni sequenza di tasti in modo da avere l'ultimo 6 00:00:24,860 --> 00:00:32,300 valore inserito dall'utente e quindi passare quel valore immesso ai puntelli sull'obiettivo dell'annuncio o al nostro nuovo obiettivo qui invece 7 00:00:32,300 --> 00:00:36,170 di quel testo fittizio codificato che abbiamo al momento. 8 00:00:36,950 --> 00:00:37,750 Quindi eccoti. 9 00:00:37,880 --> 00:00:43,610 Voglio catturare l'input dell'utente qui e inviarlo al posto del mio difficile andare al testo qui come parte del nuovo 10 00:00:43,610 --> 00:00:44,090 obiettivo. 11 00:00:44,840 --> 00:00:54,470 Quindi potremmo creare qui una variabile, input dell'utente o testo inserito, che inizialmente è una stringa vuota. 12 00:00:55,280 --> 00:00:58,520 E qui in input, sono effettivamente impostati sull'evento change. 13 00:00:58,580 --> 00:01:00,740 Possiamo ascoltare quale viene attivato e ogni volta che si preme un tasto. 14 00:01:01,310 --> 00:01:02,570 Quindi ora possiamo aggiungere una funzione. 15 00:01:05,330 --> 00:01:07,240 Gestore di modifica del testo. 16 00:01:08,220 --> 00:01:14,400 Lì otterremo un oggetto evento e quell'oggetto evento conterrà l'input dell'utente sull'evento. 17 00:01:15,470 --> 00:01:21,080 Target, che si riferisce all'elemento di input, al valore punto e quindi potremmo impostare un testo uguale a 18 00:01:21,080 --> 00:01:21,620 quello. 19 00:01:23,440 --> 00:01:26,410 Ora, inserisci il testo cambierà ad ogni pressione di un tasto. 20 00:01:26,620 --> 00:01:30,730 Una volta che ci impegniamo a modificare il gestore di modifica del testo in questo modo. 21 00:01:32,720 --> 00:01:37,790 Ora, qui in un nuovo obiettivo, possiamo usare inserire il testo. 22 00:01:37,880 --> 00:01:39,160 E allora, l'utente è entrato qui? 23 00:01:40,150 --> 00:01:45,900 E in seguito, blocciamo tutta la console e andiamo qui in modo che possiamo vedere che funziona, 24 00:01:45,900 --> 00:01:50,310 se ora siamo sicuri e inserisco il test qui e clicco all'obiettivo. 25 00:01:50,910 --> 00:01:52,890 Vediamo che funziona e questo è prodotto qui. 26 00:01:54,050 --> 00:01:58,490 Questo approccio generalmente va bene, ma può avere un piccolo difetto. 27 00:01:58,850 --> 00:02:01,430 Cosa succede se vogliamo reimpostarlo dopo aver aggiunto un nuovo obiettivo? 28 00:02:01,970 --> 00:02:04,340 Certo, possiamo andare dal nostro. 29 00:02:05,540 --> 00:02:06,560 Gestore di annunci d'oro. 30 00:02:08,470 --> 00:02:12,490 E una volta creato il nuovo obiettivo, possiamo, ovviamente, riportare il testo su una stringa vuota. 31 00:02:13,330 --> 00:02:14,800 Ma ovviamente questo non farà nulla. 32 00:02:15,280 --> 00:02:18,640 Se ho inserito il suo obiettivo, vedi, questo non si riflette qui. 33 00:02:18,700 --> 00:02:19,960 Perché non si riflette? 34 00:02:20,470 --> 00:02:22,410 Perché il nuovo componente Gold non è stato visualizzato. 35 00:02:22,510 --> 00:02:24,170 Questo non è lo stato che stiamo gestendo. 36 00:02:24,190 --> 00:02:25,540 Questa è una variabile regolare. 37 00:02:25,600 --> 00:02:27,040 Quindi, ovviamente, possiamo cambiarlo. 38 00:02:27,280 --> 00:02:28,930 Naturalmente possiamo usare per cambiare il valore. 39 00:02:29,230 --> 00:02:31,480 Ma se poi impostiamo un nuovo valore su di esso. 40 00:02:31,900 --> 00:02:37,150 Ciò non si riflette sul nostro input perché questo input ha solo una connessione al gestore di modifica del testo. 41 00:02:37,480 --> 00:02:42,040 Non sa che dovrebbe riflettere il valore corrente memorizzato e inserito nel testo. 42 00:02:42,850 --> 00:02:47,260 Ora potremmo dire al componente di input che dovrebbe farlo legando il suo valore prop. 43 00:02:47,710 --> 00:02:52,390 Possiamo associarlo al testo inserito e con papà diciamo al componente di input. 44 00:02:52,600 --> 00:02:58,300 Ehi, il valore visualizzato nell'input dovrebbe essere svalutato, memorizzato ed inserito. 45 00:02:58,330 --> 00:02:58,870 Testo. 46 00:02:59,840 --> 00:03:02,540 Se lo facciamo, sapremo qualcosa di nuovo. 47 00:03:03,140 --> 00:03:07,430 Ora, non possiamo più digitare lì, se scrivo qui, l'input non viene riflesso. 48 00:03:08,000 --> 00:03:10,190 Ora, se ci pensate, ha senso. 49 00:03:10,660 --> 00:03:16,010 Quando stai dicendo alla reattanza che l'input dovrebbe essere reso in modo tale che il valore sia da inserire, da inserire nel 50 00:03:16,460 --> 00:03:21,220 testo con ogni sequenza di tasti che cambiamo, inserisci il testo, ma inserire il testo non è stato. 51 00:03:21,230 --> 00:03:22,400 È una variabile regolare. 52 00:03:22,850 --> 00:03:28,250 Ciò significa che cambiamo la variabile con ogni pressione del tasto ma reagiamo mille riscrivendo il componente di 53 00:03:28,250 --> 00:03:28,790 input. 54 00:03:28,880 --> 00:03:34,910 Non riflette il valore aggiornato per reagire, svalutando sempre come una stringa vuota perché è stata l'ultima volta che 55 00:03:34,910 --> 00:03:40,460 ha reso questo componente e il codice X di scarico di Delford e quindi come input. 56 00:03:41,180 --> 00:03:46,220 Quindi dobbiamo dire a reagire che questo è un certo stato e che quando cambia, dovrebbe rendere nuovamente il nostro J 57 00:03:46,220 --> 00:03:47,090 come codice X. 58 00:03:47,990 --> 00:03:54,890 Quindi, ancora una volta, possiamo importarti come stato qui e convertire invio in uso del testo già strutturato qui e tu dichiari che 59 00:03:54,890 --> 00:04:00,080 inizialmente è una stringa vuota o che inizialmente ha una stringa vuota perché sto gestendo il mio 60 00:04:00,080 --> 00:04:01,030 testo inserito. 61 00:04:01,370 --> 00:04:06,250 E il secondo elemento è una funzione per aggiornare lo stato che chiamerà quindi il testo impostato. 62 00:04:07,400 --> 00:04:14,690 E ora qui ad ogni sequenza di tasti, ho impostato il mio testo inserito per svalutare il valore target di un evento. 63 00:04:15,050 --> 00:04:20,240 E qui non abbiamo bisogno di quella forma di funzione per aggiornare lo stato perché abbiamo un valore nuovo di 64 00:04:20,240 --> 00:04:22,160 zecca che non dipende dallo stato precedente. 65 00:04:22,430 --> 00:04:25,010 Quindi possiamo semplicemente aggiornare per impostare in questo modo. 66 00:04:25,940 --> 00:04:27,410 E ora questo lo farà. 67 00:04:28,880 --> 00:04:35,330 Ritorna questo componente ogni volta che digitiamo, ogni volta che chiamiamo set, entra fermo su ogni sequenza di tasti, che suona 68 00:04:35,360 --> 00:04:37,010 orribile ma che è grandioso. 69 00:04:37,130 --> 00:04:37,550 Reagire. 70 00:04:37,550 --> 00:04:43,850 Lo faremo in modo molto efficiente e pertanto questo ultimo valore si rifletterà sull'elemento di input. 71 00:04:44,480 --> 00:04:51,230 E qui in ADCO Handler, se vogliamo aggiornare, inserire, inviare testo e ripristinarlo, possiamo sicuramente richiamare, impostare, inserire testo e 72 00:04:51,440 --> 00:04:53,570 riportarlo su una stringa vuota. 73 00:04:54,280 --> 00:04:56,960 E con ciò ora abbiamo il meglio di entrambi i mondi. 74 00:04:56,990 --> 00:04:59,300 Possiamo inserire qualcosa qui che tutto funzioni. 75 00:04:59,570 --> 00:05:05,690 Ma possiamo anche manipolarlo e ripristinarlo dopo aver aggiunto un nuovo obiettivo come questo. 76 00:05:06,590 --> 00:05:09,980 Quindi questo è ora e non usare mai il caso per la gestione dello stato. 77 00:05:10,100 --> 00:05:13,340 E naturalmente ci sono molti casi d'uso nella nostra applicazione REACT. 78 00:05:13,940 --> 00:05:20,840 E qui stiamo usando la gestione dello stato per creare qualcosa che a volte viene anche chiamato in modo vincolante 79 00:05:21,290 --> 00:05:27,020 in cui vincolare il valore dell'input e ad ogni sequenza di tasti che stiamo aggiornando al 80 00:05:27,020 --> 00:05:32,660 valore, che poi ricolleghiamo all'input in modo da riflettere sempre il ultimo valore all'interno dell'input. 81 00:05:32,990 --> 00:05:36,560 Ma siamo anche in grado di gestirlo in modo guidato dallo stato. 82 00:05:36,770 --> 00:05:42,350 Quindi abbiamo tutti la possibilità di manipolare il valore dall'interno del nostro codice qui e di rifletterlo nell'input 83 00:05:42,620 --> 00:05:43,910 in questo caso? 84 00:05:45,090 --> 00:05:50,550 Con ciò, abbiamo un altro scenario di gestione statale e ora siamo in grado di aggiungere i nostri obiettivi.