1 00:00:02,180 --> 00:00:04,700 Staat ist ein entscheidendes Konzept für die Reaktion. 2 00:00:05,060 --> 00:00:10,820 Und mit unserem Wissen über den Status können wir jetzt auch sicherstellen, dass wir nicht nur ein Dummy-Ziel 3 00:00:10,940 --> 00:00:13,640 erstellen, sondern tatsächlich die tatsächlichen Benutzereingaben widerspiegeln. 4 00:00:14,060 --> 00:00:15,740 Kehren wir also zu einem neuen Ziel zurück. 5 00:00:16,280 --> 00:00:24,860 Was Sie tun möchten, ist, dass wir die Benutzereingaben bei jedem Tastendruck in einer Variablen speichern möchten, damit wir den neuesten vom Benutzer eingegebenen 6 00:00:24,860 --> 00:00:32,300 Wert haben und diesen eingegebenen Wert dann an Requisiten für das Anzeigenziel oder an unser neues Ziel hier anstatt an 7 00:00:32,300 --> 00:00:36,170 übergeben diesen fest codierten Dummy-Text, den wir im Moment haben. 8 00:00:36,950 --> 00:00:37,750 Also los geht's. 9 00:00:37,880 --> 00:00:43,610 Ich möchte die Benutzereingaben hier erfassen und diese anstelle meines harten Textes hier als Teil des neuen Ziels 10 00:00:43,610 --> 00:00:44,090 senden. 11 00:00:44,840 --> 00:00:54,470 Wir könnten hier also eine Variable erstellen, Benutzereingaben oder möglicherweise eingegebenen Text, der anfangs eine leere Zeichenfolge ist. 12 00:00:55,280 --> 00:00:58,520 Und hier bei der Eingabe werden sie tatsächlich auf das Änderungsereignis gesetzt. 13 00:00:58,580 --> 00:01:00,740 Wir können hören, was abgefeuert wird und jeder Tastendruck. 14 00:01:01,310 --> 00:01:02,570 Jetzt können wir eine Funktion hinzufügen. 15 00:01:05,330 --> 00:01:07,240 Textänderungshandler. 16 00:01:08,220 --> 00:01:14,400 Dort erhalten wir ein Ereignisobjekt und dieses Ereignisobjekt enthält Benutzereingaben für das Ereignis. 17 00:01:15,470 --> 00:01:21,080 Ziel, das sich auf das Eingabeelement, den Punktwert, bezieht, und daher könnten wir den eingegebenen Text gleich 18 00:01:21,080 --> 00:01:21,620 setzen. 19 00:01:23,440 --> 00:01:26,410 Jetzt ändert sich die Texteingabe mit jedem Tastendruck. 20 00:01:26,620 --> 00:01:30,730 Sobald wir die Änderung an den Textänderungshandler wie folgt gebunden haben. 21 00:01:32,720 --> 00:01:37,790 Jetzt, hier in neuem Ziel, können wir die Eingabe von Text verwenden. 22 00:01:37,880 --> 00:01:39,160 Also, was hat der Benutzer hier eingegeben? 23 00:01:40,150 --> 00:01:45,900 Und danach lassen Sie uns die gesamte Konsole sperren und Sie gehen hierher, damit wir sehen können, dass dies funktioniert, wenn 24 00:01:45,900 --> 00:01:50,310 wir jetzt die Sicherheit gewährleisten und hier den Test eingeben und auf das Ziel klicken. 25 00:01:50,910 --> 00:01:52,890 Wir sehen, dass dies funktioniert und dies hier ausgegeben wird. 26 00:01:54,050 --> 00:01:58,490 Dieser Ansatz ist im Allgemeinen in Ordnung, kann aber einen winzigen Fehler aufweisen. 27 00:01:58,850 --> 00:02:01,430 Was ist, wenn wir dies zurücksetzen möchten, nachdem wir ein neues Ziel hinzugefügt haben? 28 00:02:01,970 --> 00:02:04,340 Natürlich können wir zu unserem gehen. 29 00:02:05,540 --> 00:02:06,560 Ad Gold Handler. 30 00:02:08,470 --> 00:02:12,490 Und sobald wir das neue Ziel erstellt haben, können wir natürlich den eingegebenen Text auf eine leere Zeichenfolge zurücksetzen. 31 00:02:13,330 --> 00:02:14,800 Aber das wird natürlich nichts bewirken. 32 00:02:15,280 --> 00:02:18,640 Wenn ich sein Ziel eingegeben habe, wird dies hier nicht wiedergegeben. 33 00:02:18,700 --> 00:02:19,960 Warum wird es nicht reflektiert? 34 00:02:20,470 --> 00:02:22,410 Weil die neue Goldkomponente nicht gerendert wurde. 35 00:02:22,510 --> 00:02:24,170 Dies ist kein Zustand, den wir verwalten. 36 00:02:24,190 --> 00:02:25,540 Dies ist eine reguläre Variable. 37 00:02:25,600 --> 00:02:27,040 Also können wir es natürlich ändern. 38 00:02:27,280 --> 00:02:28,930 Natürlich können wir den Wert ändern. 39 00:02:29,230 --> 00:02:31,480 Aber wenn wir dann einen neuen Wert setzen. 40 00:02:31,900 --> 00:02:37,150 Dies wird in unserer Eingabe nicht berücksichtigt, da diese Eingabe nur eine Verbindung zum Textänderungshandler hat. 41 00:02:37,480 --> 00:02:42,040 Es ist nicht bekannt, dass es den aktuell gespeicherten Wert widerspiegeln und den Text eingeben soll. 42 00:02:42,850 --> 00:02:47,260 Jetzt können wir der Eingabekomponente mitteilen, dass sie dies tun soll, indem sie ihre Wertstütze binden. 43 00:02:47,710 --> 00:02:52,390 Wir können dies an eingegebenen Text binden und mit Papa die Eingabekomponente mitteilen. 44 00:02:52,600 --> 00:02:58,300 Hey, der in der Eingabe angezeigte Wert sollte abgewertet, gespeichert und eingegeben werden. 45 00:02:58,330 --> 00:02:58,870 Text. 46 00:02:59,840 --> 00:03:02,540 Wenn wir das tun, werden wir etwas Neues erfahren. 47 00:03:03,140 --> 00:03:07,430 Jetzt können wir dort nicht mehr tippen. Wenn ich hier tippe, wird die Eingabe nicht wiedergegeben. 48 00:03:08,000 --> 00:03:10,190 Wenn Sie darüber nachdenken, macht das Sinn. 49 00:03:10,660 --> 00:03:16,010 Wenn Sie der Reaktanz mitteilen, dass die Eingabe so gerendert werden soll, dass der Wert eingegeben werden soll, geben Sie 50 00:03:16,460 --> 00:03:21,220 bei jedem Tastendruck, den wir ändern, Text ein, aber die Eingabe von Text ist kein Status. 51 00:03:21,230 --> 00:03:22,400 Es ist eine reguläre Variable. 52 00:03:22,850 --> 00:03:28,250 Das bedeutet also, dass wir die Variable bei jedem Tastendruck ändern, aber tausendmal die Eingabekomponente neu 53 00:03:28,250 --> 00:03:28,790 schreiben. 54 00:03:28,880 --> 00:03:34,910 Es gibt nicht den aktualisierten Wert wieder, um zu reagieren. Es wird immer als leere Zeichenfolge abgewertet, da dies 55 00:03:34,910 --> 00:03:40,460 das letzte Mal war, dass diese Komponente und der Delford-Entladungs-X-Code und daher als Eingabe gerendert wurden. 56 00:03:41,180 --> 00:03:46,220 Wir müssen also sagen, dass dies ein Zustand ist und dass er unser J als X-Code rendern sollte, wenn 57 00:03:46,220 --> 00:03:47,090 er sich ändert. 58 00:03:47,990 --> 00:03:54,890 Daher können wir Sie hier wieder als Status importieren und die Eingabe in Text konvertieren, der bereits hier strukturiert ist. Sie geben an, dass es 59 00:03:54,890 --> 00:04:00,080 sich anfangs um eine leere Zeichenfolge handelt oder dass hier zunächst eine leere Zeichenfolge vorhanden ist, da ich meinen 60 00:04:00,080 --> 00:04:01,030 eingegebenen Text verwalte. 61 00:04:01,370 --> 00:04:06,250 Und das zweite Element ist eine Funktion zum Aktualisieren des Status, der daher den eingegebenen Text aufruft. 62 00:04:07,400 --> 00:04:14,690 Und jetzt setze ich hier bei jedem Tastendruck meinen eingegebenen Text so, dass ein Ereigniszielwert abgewertet wird. 63 00:04:15,050 --> 00:04:20,240 Und hier brauchen wir diese Funktionsform zum Aktualisieren des Status nicht, weil wir einen brandneuen Wert haben, 64 00:04:20,240 --> 00:04:22,160 der nicht vom vorherigen Status abhängt. 65 00:04:22,430 --> 00:04:25,010 Wir können also einfach aktualisieren, um dies so einzustellen. 66 00:04:25,940 --> 00:04:27,410 Und jetzt wird dies. 67 00:04:28,880 --> 00:04:35,330 Rendern Sie diese Komponente immer wieder, wenn wir tippen, wenn wir set aufrufen, und geben Sie bei jedem Tastendruck noch ein, was 68 00:04:35,360 --> 00:04:37,010 schrecklich klingt, aber großartig ist. 69 00:04:37,130 --> 00:04:37,550 Reagieren. 70 00:04:37,550 --> 00:04:43,460 Wir werden dies auf sehr effiziente Weise tun und daher wird dieser neueste Wert auf dem Eingabeelement 71 00:04:43,490 --> 00:04:43,850 reflektiert. 72 00:04:44,480 --> 00:04:51,230 Und hier in ADCO Handler können wir, wenn wir es aktualisieren, eingeben, schreiben und zurücksetzen möchten, den Text auf jeden Fall abrufen, festlegen, 73 00:04:51,440 --> 00:04:53,570 eingeben und auf eine leere Zeichenfolge zurücksetzen. 74 00:04:54,280 --> 00:04:56,960 Und damit haben wir jetzt das Beste aus beiden Welten. 75 00:04:56,990 --> 00:04:59,300 Wir können hier etwas eingeben, das alles funktioniert. 76 00:04:59,570 --> 00:05:05,690 Wir können es aber auch manipulieren und zurücksetzen, nachdem wir ein neues Ziel wie dieses hinzugefügt haben. 77 00:05:06,590 --> 00:05:09,980 Dies ist also jetzt und niemals ein Anwendungsfall für die staatliche Verwaltung. 78 00:05:10,100 --> 00:05:13,340 Und natürlich gibt es in unserer REACT-Anwendung viele Anwendungsfälle. 79 00:05:13,940 --> 00:05:20,840 Und hier verwenden wir die Statusverwaltung, um etwas zu erstellen, das manchmal auch als Wegbindung bezeichnet wird, wobei der 80 00:05:21,290 --> 00:05:27,020 Wert der Eingabe gebunden wird und bei jedem Tastendruck der Wert aktualisiert wird, den wir dann 81 00:05:27,020 --> 00:05:32,660 an die Eingabe zurückbinden, sodass wir immer den Wert widerspiegeln letzter Wert innerhalb der Eingabe. 82 00:05:32,990 --> 00:05:36,560 Wir können dies aber auch staatlich steuern. 83 00:05:36,770 --> 00:05:42,350 Haben wir also alle die Möglichkeit, den Wert innerhalb unseres Codes hier oben zu manipulieren und dies in diesem Fall wieder 84 00:05:42,620 --> 00:05:43,910 in die Eingabe einzubeziehen? 85 00:05:45,090 --> 00:05:50,550 Damit haben wir ein weiteres Szenario der staatlichen Verwaltung und können nun unsere eigenen Ziele hinzufügen.