1 00:00:02,530 --> 00:00:05,110 Wie können wir das sonst noch optimieren? 2 00:00:05,110 --> 00:00:11,350 Nun, Sie werden vielleicht bemerken, dass dieser jsx-Code hier am Ende immer wieder wiederholt werden kann, jede Eingabe 3 00:00:11,360 --> 00:00:12,590 sieht so aus. 4 00:00:12,640 --> 00:00:18,130 Wir haben eine Ansicht, wir haben eine Beschriftung mit der Texteingabe selbst und wir möchten möglicherweise auch einen Fehlertext, den 5 00:00:18,130 --> 00:00:19,140 wir anzeigen können. 6 00:00:19,270 --> 00:00:22,900 Es wäre also sinnvoll, dies in eine separate Komponente auszulagern, 7 00:00:22,990 --> 00:00:25,370 und genau das möchte ich tun. 8 00:00:25,480 --> 00:00:32,230 Ich gehe zu meinem Komponentenordner und füge dort im UI-Ordner eine Eingabe hinzu. js-Datei, die eine React-Komponente enthält, also importiere ich 9 00:00:32,230 --> 00:00:38,410 natürlich React from React und importiere dann ein paar Dinge aus React Native. 10 00:00:38,410 --> 00:00:45,460 Diese Dinge sind am Ende meine Ansicht, die Textkomponente, die Texteingabekomponente und das Stylesheet, weil ich 11 00:00:45,460 --> 00:00:54,210 ' Ich brauche dies auch von React Native und damit können wir hier die Eingabekomponente erstellen, die Requisiten erhält und 12 00:00:54,210 --> 00:01:01,410 etwas jsx zurückgeben muss. Wir haben ein Styles-Objekt mit Stylesheet. erstellen und natürlich 13 00:01:02,780 --> 00:01:08,230 exportieren wir dies als Standard hier, diese Komponente. 14 00:01:08,340 --> 00:01:18,420 Wenn wir nun zum Bildschirm zum Bearbeiten des Produkts zurückkehren, können wir diesen Titel-jsx-Code ausschneiden, sodass die umgebende Ansicht, der Text, die Texteingabe und 15 00:01:18,440 --> 00:01:23,890 dieser Teil der Fehlermeldung ihn hier aus dem Bildschirm zum Bearbeiten des 16 00:01:24,250 --> 00:01:32,700 Produkts herausschneiden und verschieben das in den Eingabebildschirm und dort, verwenden Sie es als Rückgabewert in der Eingabekomponente hier. 17 00:01:32,740 --> 00:01:37,210 Jetzt müssen wir das natürlich ein wenig anpassen, aber das ist unser allgemeines Skelett, das ich dort verwenden 18 00:01:37,210 --> 00:01:37,720 möchte. 19 00:01:37,960 --> 00:01:42,720 Jetzt übernehme ich auch vom Bildschirm zum Bearbeiten 20 00:01:42,770 --> 00:01:49,270 des Produkts das Styling. Dort können diese Formularsteuerungsbezeichnung und das Eingabestyling entfernt werden 21 00:01:49,270 --> 00:01:55,440 und sollten in die Eingabekomponente und dort in das Stylesheet verschoben werden. 22 00:01:55,460 --> 00:02:00,740 Damit kann dies natürlich nur für einen Titel verwendet werden, und ich möchte eine Eingabekomponente erstellen, 23 00:02:00,740 --> 00:02:07,580 die für jede Eingabe verwendet werden kann. Dies bedeutet beispielsweise, dass die Beschriftung hier dynamisch sein muss, also erwarte ich dies Holen 24 00:02:07,710 --> 00:02:10,830 Sie sich dies auf einer Requisite namens Label vielleicht. 25 00:02:13,740 --> 00:02:18,420 Ich möchte im Allgemeinen auch sicherstellen, dass die Texteingabe von außen konfiguriert 26 00:02:18,420 --> 00:02:25,800 werden kann, daher leite ich alle Requisiten, die ich hier auf meiner Eingabekomponente erhalte, an die Texteingabe weiter, damit wir 27 00:02:25,800 --> 00:02:31,060 diese Eingabekomponente festlegen können Dinge wie der Tastaturtyp, weil ich dies hier nicht fest 28 00:02:31,070 --> 00:02:31,570 codieren 29 00:02:31,570 --> 00:02:36,720 möchte, sondern ein wiederverwendbarer Wrapper um die Texteingabekomponente sein sollte, der von außen konfiguriert 30 00:02:36,720 --> 00:02:37,570 werden kann. 31 00:02:37,800 --> 00:02:43,990 Also diese Einstellungen hier zum Beispiel, ich werde sie von hier aus schneiden, damit wir sie von außen einstellen können. Ich werde diese 32 00:02:44,010 --> 00:02:46,530 Hörer auch loswerden, weil wir sie nicht wirklich brauchen. 33 00:02:52,130 --> 00:02:57,230 Der Fehlertext hier sollte auch von außen einstellbar sein, daher werde ich hier nach Requisiten-Fehlertext 34 00:02:57,230 --> 00:02:58,640 suchen und natürlich können 35 00:02:58,640 --> 00:03:02,720 Sie diesen Requisiten wie immer beliebige Namen geben. Natürlich müssen wir 36 00:03:02,720 --> 00:03:07,570 auch ändern, was wir hier als zuweisen Wert und so weiter, das wird 37 00:03:07,570 --> 00:03:08,800 sich auch ändern. 38 00:03:09,350 --> 00:03:11,720 Aber jetzt können wir diese Eingabe 39 00:03:11,720 --> 00:03:23,200 bereits hier verwenden. Gehen wir zum Bildschirm zum Bearbeiten des Produkts und dort gehe ich einfach nach oben und importiere natürlich Eingaben aus dem Komponentenordner und dort aus dem 40 00:03:23,200 --> 00:03:27,210 UI-Ordner und dort aus der Eingabe und dann wir Ich 41 00:03:27,550 --> 00:03:32,770 kann die Eingabekomponente an der Stelle verwenden, an der ich zuvor meine Texteingabekomponente 42 00:03:32,770 --> 00:03:33,910 hier hatte. 43 00:03:34,000 --> 00:03:40,510 Dort füge ich nur die Eingabe hinzu und jetzt können wir bei der Eingabe die Einstellung hinzufügen, die ich geschnitten habe, wie den 44 00:03:40,510 --> 00:03:43,000 Tastaturtyp und so weiter, da diese weitergeleitet wird. 45 00:03:43,180 --> 00:03:50,950 Wir können unsere Titelbezeichnung wie Titel und auch unseren möglichen Fehlertext wie Bitte geben Sie einen gültigen Titel ein, obwohl dies nicht alles ist, was wir 46 00:03:51,550 --> 00:03:55,470 in Bezug auf die Validierung tun werden, aber es ist ein Anfang. 47 00:03:55,510 --> 00:03:57,250 Auf diese Weise können wir diesen Eingang 48 00:03:59,130 --> 00:04:02,970 dann verwenden, und natürlich können wir ihn jetzt auch verwenden, um die anderen Eingänge zu ersetzen. 49 00:04:02,970 --> 00:04:11,400 Zum Beispiel hier, die imageUrl, hier setze ich dies auf imageUrl. Bitte geben Sie eine gültige imageUrl ein. 50 00:04:11,400 --> 00:04:17,910 Der Standardtyp für die Tastatur ist in Ordnung. Die automatische Korrektur der automatischen 51 00:04:17,910 --> 00:04:23,070 Großschreibung ist nicht erforderlich irgendetwas damit, wir könnten etwas Logik hinzufügen, 52 00:04:23,070 --> 00:04:29,990 aber ich mache es hier nicht. Für den Preis lasse ich das bedingte Rendering, aber dort 53 00:04:33,510 --> 00:04:42,300 kann ich meine Eingabe hier hinzufügen, diesen auf Preis setzen, bitte geben Sie einen gültigen Preis ein. Der Tastaturtyp sollte hier natürlich nicht Standard sein, sondern ein Dezimalblock, 54 00:04:42,330 --> 00:04:49,380 keine automatische Großschreibung erforderlich oder Autokorrektur, also lassen Sie uns das loswerden. Und für die Beschreibung hier werde ich 55 00:04:49,380 --> 00:04:58,740 auch meine Eingabe hier hinzufügen, Beschreibung, bitte geben Sie eine gültige Beschreibung ein, Tastaturtyp kann Standard sein, ich kann 56 00:04:58,980 --> 00:05:05,700 automatische Großschreibung verwenden, automatische Korrektur, aber ich werde keinen Rückgabetastentyp festlegen, sondern hier 57 00:05:05,700 --> 00:05:14,330 Ich möchte mehrzeilig wie folgt einstellen, was eine mehrzeilige Bearbeitung ermöglicht und die Anzahl der Zeilen auf 58 00:05:14,330 --> 00:05:15,830 drei festlegt. 59 00:05:15,830 --> 00:05:20,630 Dies wird jedoch nur von Android verwendet, aber dort wird die Anzahl der Zeilen, die Sie 60 00:05:20,630 --> 00:05:25,580 eingeben können, eingeschränkt. Unter iOS hat dies keine Auswirkungen. Auf diese Weise können Sie diese Eingabekomponente jetzt verwenden 61 00:05:25,580 --> 00:05:27,470 und sie dennoch von außen konfigurieren. 62 00:05:27,470 --> 00:05:30,240 Davon abgesehen, wie gesagt, wir 63 00:05:30,260 --> 00:05:35,710 sind noch nicht fertig, was ist mit dem Wert und diesem Änderungs-Text-Listener? 64 00:05:35,840 --> 00:05:42,030 Es gibt verschiedene Möglichkeiten, wie Sie mit dieser Texteingabe oder den Textwerten hier umgehen können. 65 00:05:42,050 --> 00:05:47,960 Sie können es trotzdem einfach an die übergeordnete Komponente weiterleiten und diese Eingabekomponente nur als visuellen Wrapper verwenden, 66 00:05:48,080 --> 00:05:49,020 aber ich 67 00:05:49,310 --> 00:05:55,850 werde noch etwas weiter gehen und diesen Wert und die Gültigkeit dieser einzelnen Eingabe innerhalb der Eingabekomponente verwalten, damit Ich 68 00:05:56,180 --> 00:05:58,460 melde mich dann nur bei meiner 69 00:05:58,460 --> 00:06:05,280 übergeordneten Komponente, also am Ende im Bildschirm zum Bearbeiten des Produkts, wie hoch der aktuelle Wert ist und ob er gültig 70 00:06:05,280 --> 00:06:07,900 ist oder nicht, damit die Validierung nicht innerhalb 71 00:06:07,940 --> 00:06:11,980 der übergeordneten Komponente erfolgen muss, aber das ist wieder völlig erledigt für 72 00:06:12,170 --> 00:06:17,480 Sie, ob Sie das tun wollen oder nicht. Hier werde ich eine neue Konstante 73 00:06:17,480 --> 00:06:25,520 in die Eingabekomponente, den Textänderungs-Handler, einfügen, in der ich diesen Eingabetext erhalte, da ich das jetzt binde oder 74 00:06:25,550 --> 00:06:31,400 bereits gebunden bin und es im Allgemeinen so behalte, obwohl wir den Bezeichner 75 00:06:31,400 --> 00:06:33,380 hier nicht benötigen Sie 76 00:06:33,620 --> 00:06:39,560 müssen nicht mehr binden, da dies innerhalb einer einzelnen Eingabe liegt. Wir benötigen dort 77 00:06:39,560 --> 00:06:40,810 keine Kennung. 78 00:06:40,880 --> 00:06:44,150 Dies wird nun bei jedem Tastendruck ausgelöst und daher 79 00:06:44,150 --> 00:06:56,140 möchte ich jetzt hier prüfen, ob dies gültig ist oder nicht, und auch meinen Wert dieser Eingabe verwalten. Jetzt können wir wieder einen Reduzierer oder einzelne Zustände verwenden, die mit dem Nutzungsstatus 80 00:06:56,140 --> 00:07:02,270 verwaltet oder mit dem Nutzungsstatus erstellt wurden, aber ich werde mich für einen Reduzierer entscheiden 81 00:07:02,300 --> 00:07:03,920 und hier habe ich 82 00:07:04,090 --> 00:07:12,300 meinen Eingangsreduzierer, der Name liegt bei Ihnen, erhält den Status, erhält einen Aktion und gibt am Ende einen neuen Status 83 00:07:12,300 --> 00:07:13,110 zurück. 84 00:07:13,440 --> 00:07:20,390 Dann kann ich hier in der Eingabe use reducer aufrufen und weiterleiten oder dies auf die Eingangsreduzierung setzen, und mein Anfangszustand 85 00:07:20,550 --> 00:07:28,200 für diese Eingabe hier ist ein einfaches Javascript-Objekt mit drei Werten. Der Wert, den Sie derzeit haben, der anfänglich leer sein 86 00:07:28,260 --> 00:07:34,470 kann, aber eigentlich möchte ich mir erlauben, einen Anfangswert von außen festzulegen, da wir diesen beispielsweise 87 00:07:34,470 --> 00:07:37,230 beim Bearbeiten von Produkten benötigen. Daher überprüfe 88 00:07:37,260 --> 00:07:41,570 ich, ob der Anfangswert der Requisiten festgelegt ist Auch dies ist natürlich 89 00:07:41,610 --> 00:07:43,700 ein Name, den Sie wählen 90 00:07:43,700 --> 00:07:46,980 können, wie Sie möchten, und wenn dies der 91 00:07:46,980 --> 00:07:49,220 Fall ist, setze ich dies auf 92 00:07:49,230 --> 00:07:50,040 den 93 00:07:50,130 --> 00:07:53,460 Anfangswert der Requisiten, andernfalls mache ich mich daran, dies 94 00:07:53,460 --> 00:08:03,600 auf eine leere Zeichenfolge zu setzen, dann werde ich es auch verwalten ob dies gültig ist oder nicht und dort kann ich wieder überprüfen, ob die ursprünglich 95 00:08:03,630 --> 00:08:05,160 gültigen Requisiten gesetzt sind. 96 00:08:05,160 --> 00:08:08,780 Wenn dies der Fall ist, nehme ich automatisch den Wert, 97 00:08:08,790 --> 00:08:11,750 der wahr oder falsch sein sollte. Wenn 98 00:08:13,420 --> 00:08:16,440 dies nicht der Fall ist, wird dies automatisch 99 00:08:16,450 --> 00:08:23,170 als falsch behandelt und ich werde auch verwalten, ob dies noch berührt wurde oder nicht, also ob der Benutzer 100 00:08:23,260 --> 00:08:26,850 habe hier tatsächlich getippt und dies kann hilfreich sein, um 101 00:08:27,100 --> 00:08:33,760 eine bessere Benutzererfahrung hinsichtlich der Anzeige von Validierungsfehlern zu erzielen. Hier werde ich dies zunächst auf false setzen. 102 00:08:33,780 --> 00:08:40,260 Dies gibt uns natürlich den Eingabestatus-Schnappschuss und eine Versandfunktion zurück, die ich hier auch 103 00:08:40,260 --> 00:08:46,920 als Versand bezeichnen kann, da wir keinen Namenskonflikt haben und im Textänderungshandler natürlich eine Aktion 104 00:08:46,920 --> 00:08:54,420 auslösen werde, eine Aktion, die ich daher wird hier mit einer Aktionskennung erstellt, z. B. Eingabeänderung, 105 00:08:54,420 --> 00:09:00,040 die hier versendet werden soll, Eingabeänderung eingeben und dann hier im 106 00:09:00,040 --> 00:09:08,930 Reduzierer eine switch-Anweisung hinzufügen, um die Dinge zu verwechseln, den Aktionstyp zu überprüfen und die Eingabe für den Fall 107 00:09:08,960 --> 00:09:16,150 zu überprüfen , wir wollen etwas tun. Im Standardfall werde ich nur meinen Status 108 00:09:16,190 --> 00:09:22,400 zurückgeben, also werde ich nichts tun, aber hier möchte ich natürlich etwas anderes tun. 109 00:09:22,630 --> 00:09:27,730 Jetzt hier im Textänderungshandler versende ich natürlich die Eingabeänderung und möchte den Wert weiterleiten, den 110 00:09:27,760 --> 00:09:29,320 ich in einem Werteschlüssel 111 00:09:29,410 --> 00:09:35,320 gespeichert habe, aber jetzt möchte ich hier auch eine eingabespezifische Validierung durchführen und die Informationen weiterleiten, ob die 112 00:09:35,350 --> 00:09:39,550 Eingabe gültig ist oder nicht . Und im Anhang finden 113 00:09:39,570 --> 00:09:45,040 Sie ein Validierungssetup oder einen Validierungscode, durch den ich Sie jetzt führen werde. 114 00:09:45,210 --> 00:09:50,760 Hier habe ich eine Konstante, die einen regulären E-Mail-Ausdruck einrichtet. Ein regulärer Ausdruck, mit dem wir E-Mail-Adressen 115 00:09:50,760 --> 00:09:52,710 überprüfen können. Wir haben noch 116 00:09:52,710 --> 00:09:58,290 keine E-Mail-Adresse eingegeben, aber später, wenn wir die Authentifizierung hinzufügen, haben wir diese und dann möchte ich 117 00:09:58,290 --> 00:10:00,670 in der Lage sein Um diese Eingabekomponente 118 00:10:00,780 --> 00:10:04,580 zu verwenden, sollte diese Komponente darauf vorbereitet sein, auch E-Mails zu validieren. 119 00:10:04,740 --> 00:10:10,140 Dann habe ich hier die gültige Hilfsvariable, denn dann haben wir hier eine Reihe von Prüfungen. 120 00:10:10,140 --> 00:10:16,610 Jetzt möchte ich sicherstellen, dass wir die Kriterien, die wir von außen verwenden möchten, mithilfe von Requisiten festlegen können. So überprüfe ich beispielsweise, ob 121 00:10:16,620 --> 00:10:21,030 erforderliche Requisiten festgelegt sind, ob diese auf true festgelegt sind, ob sie überhaupt festgelegt sind und 122 00:10:21,030 --> 00:10:26,610 ob Ist dies der Fall, wird diese Prüfung durchgeführt. Wenn die erforderliche Requisite nicht eingestellt ist, wird 123 00:10:26,610 --> 00:10:31,620 diese Prüfung nicht durchgeführt, und daher wird diese Validierung nicht durchgeführt. Dies gilt für 124 00:10:31,620 --> 00:10:33,870 alle meine verschiedenen Validierungen hier. 125 00:10:34,080 --> 00:10:40,180 Wir können also eine erforderliche Requisite festlegen, um zu überprüfen, ob sie nicht leer ist. Wenn sie leer ist, setzen wir sie auf false. 126 00:10:40,440 --> 00:10:46,140 Wir können eine E-Mail-Requisite für die Eingabekomponente festlegen, um zu überprüfen, ob sie eine gültige E-Mail-Adresse ist. Wenn dies nicht der 127 00:10:46,320 --> 00:10:48,330 Fall ist, setzen wir sie auf false. 128 00:10:48,450 --> 00:10:55,260 Wir können mit dem Min-Längen-Validator eine Zahl auf zu klein oder zu groß oder eine Zeichenfolge 129 00:10:55,260 --> 00:10:56,070 auf 130 00:10:56,070 --> 00:11:01,950 zu kurz prüfen, und natürlich können Sie hier mehr Logik hinzufügen, möglicherweise auch mit 131 00:11:01,950 --> 00:11:09,800 einem Paket wie ValidateJs, das ich bereits erwähnt habe. Damit habe ich am Ende eine Gültigkeit, die standardmäßig wahr, aber 132 00:11:09,940 --> 00:11:16,520 falsch ist, sobald eine Validierung fehlschlägt. Daher können wir jetzt hinzufügen, dass sie auch für diese ausgelöste Aktion gültig 133 00:11:16,520 --> 00:11:17,060 ist.