React-Hook-Formulare: Masterformular-Handling in React

1. Einführung in den Kurs: Willkommen zu diesem Kurs zur Beherrschung von React-Hook-Formularen. Ich bin Fazal und freue mich, Sie auf dieser Reise begleiten zu dürfen , bei der wir lernen, wie Sie Formulare in React effektiv verwalten können Nun, die Verwaltung von Formularen kann komplex und eine mühsame Aufgabe sein, und aus diesem Grund freue ich mich React Hook Form vorstellen zu können, ein Tool, das die Formularverarbeitung ein Tool, das die revolutioniert In diesem Kurs werden wir alles untersuchen, von einfachen Formularen bis hin zu fortgeschrittenen Validierungstechniken, um Ihre Formularverwaltung rationeller und effektiver zu Ihre Formularverwaltung rationeller und effektiver Behandeln Sie viele Dinge wie die Einführung in Formulare in React Wir werden über React-Hook-Formulare sprechen, Grundlagen, in denen wir die Einzelheiten der Formularverwaltung mit React-Hook-Form und die Funktionsweise dieser Bibliothek namens React Hook Form behandeln Formularverwaltung mit React-Hook-Form und Funktionsweise dieser Bibliothek namens React Hook Wir werden auch die Validierungstechniken verstehen und erfahren, wie Sie robuste Validierungen implementieren können Wir werden mehr über Leistungsverbesserungen erfahren, und ich kann Ihnen versichern, dass Sie am Ende dieses Kurses über alle Tools und Kenntnisse verfügen werden, um leistungsstarke, benutzerfreundliche Formulare in React zu erstellen leistungsstarke, benutzerfreundliche Formulare in Für wen ist dieser Kurs gedacht? Dieser Kurs ist also perfekt für alle, die ihre Reaktionsfähigkeit verbessern möchten Egal, ob Sie ein Anfänger sind oder jemand, der sein Wissen vertiefen oder das Formularmanagement in React vertiefen möchte , jeder kann von diesem speziellen Kurs profitieren Dieser Kurs ist praktisch und was auch immer wir lernen werden, wir werden lernen, indem wir uns Beispiele in der Praxis ansehen Ich freue mich sehr, Sie auf diese aufregende Reise mitzunehmen. Ich hoffe, du freust dich auch und wir sehen uns auf der anderen Seite. 2. Erste Schritte: Formulare in React einfach gemacht: Jetzt ist es an der Zeit , dass ich über die Formulare spreche und darüber, wie Sie Formulardaten in React verwalten können. Wir werden also ein Basisformular erstellen und uns mit den Einzelheiten der Formularverwaltung oder Datenverwaltung mit Formularen vertraut machen ein Basisformular erstellen und uns mit den Einzelheiten der Formularverwaltung oder Datenverwaltung mit Formularen vertraut oder Datenverwaltung mit Formularen Hier habe ich also ein sehr einfaches React-Weizen-Projekt, Sie sehen können, und es ist ein sehr Das erste Beispiel: Ich habe in der App JSX ein bisschen aufgeräumt, wie Sie sehen können, wie Sie sehen können Und app.j6 wird hier drüben im strikten Modus in Mean Dot Jx gerendert drüben im strikten Modus in Mean Dot Jx Schließ das. Und hier habe ich ein CSS, das sehr einfaches CSS ist. Es ist nicht viel. Ich setze den Rand für alle auf Null Pixel, und dann füge ich für Dev Flex hinzu , die Anzeige von Flex, die rechtfertigt, dass alles zentriert wird. In Ordnung. Also werde ich das einfach schließen und wir konzentrieren uns auf app.j6. In Ordnung. Bei mir läuft der Server und Sie können die Ausgabe auf der rechten Seite sehen. Alles klar? Also, ich werde ein sehr einfaches Eingabefeld hinzufügen , und darauf werden wir aufbauen. In Ordnung. Also, was ich hier machen würde, ist hier. Okay? Ich sage Formular o, weil das Eingabefeld innerhalb des FM-Tags sein muss, okay? Das ist also unser FM-Tag, okay. Und ich werde sagen, beim Abschicken drüben, beim Abschicken müssen wir es irgendwo einreichen. Okay? Also brauchen wir eine Funktion , die die Einreichung bearbeitet. Aber vorerst lasse ich das leer und fülle das Feld später aus. Ich füge hier ein Etikett hinzu, okay. Und das Etikett wird ein Name sein. Okay. Lass mich sehen, ob das Hoppla ist. Ich werde eine Fehlermeldung bekommen Lassen Sie mich also auch diese Funktion hinzufügen, weil wir die Ausgabe nicht sehen werden, also sage ich, handhaben Sie das Senden hier, reichen Sie etwas wie das hier ein. Und hier drüben in der Komponente werde ich const, handle submit sagen , so etwas, und ich werde hier eine Mt-Arrow-Funktion hinzufügen Ordnung. Bis jetzt passiert also nichts, da wir die Logik definieren müssen , wie die Einreichung funktionieren würde. Ordnung. Also, dieses Etikett ist da, okay? Wir haben das abschließende Tag von label, und ich werde hier eine Eingabe hinzufügen. Okay. Und ich werde sagen, dass die Eingabe vom Typ Text ist. Okay? Also der Typ hier drüben ist Text, und ich werde hier sagen, Name ist Name. Okay. Also das hat einfache einfache Anführungszeichen. Es ist besser, die Konsistenz hier zu haben. Das ist ein Name. Ich werde hier einen Wert haben. Was ist nun Wert? Wert, den wir zuweisen müssen. Okay, ich nehme einfach Null hier drüben, so etwas in der Art. Okay. Aber das ist nicht der tatsächliche Name. Wir müssen es mit etwas verknüpfen, damit wir es erstellen können. Okay? Also ich sage zur Veränderung, wir müssen uns hier um den Wandel kümmern. Okay? Also keine Veränderung, was passiert? Das werde ich auch erwähnen. Okay? Okay, ich werde hier drüben sein und ich sage, den Wandel regeln. Sowas in der Art. Okay. Also hier habe ich, weißt du, dieses Feld, das hinzugefügt wurde, okay? Was ich jetzt mache, ist, diesen Wertwert zu verwenden Er bindet den Anfangswert hier drüben. Bei Änderung wird das OnChange-Ereignis ausgelöst , wenn sich in diesem bestimmten Feld etwas ändert, okay? Und im Moment verlinke ich wie bei Änderung, nenne ich diese spezielle Funktion handle change Und das ist eine Funktion , die die Änderung für uns übernimmt, okay? Wir können hier etwas Logik haben, okay? In Handle Change kann ich also das Event-Objekt hier akzeptieren. Okay. Und ich kann hier Console Dot Log sagen, okay? Und ich kann E-Punkt-Zielpunktwert sagen. Okay. Und hier drüben, wenn ich reinkomme, okay, ich denke, das sollte jetzt okay sein. Lass mich das speichern. Lassen Sie mich zur Inspektion rübergehen. Wir sollten das Protokoll so sehen, wie und wann wir im Grunde sind , während wir tippen. Also werde ich eine harte Aktualisierung durchführen , damit alle Fehler verschwinden. Okay. Und ich sage einfach, damit du es siehst, ich tippe Dinge ein. Ups. Also im Grunde hat das im Grunde einen Wert von Null Also das ist ein Problem hier drüben. Wenn ich das auskommentiere, lass mich das auskommentieren. Okay. Und wenn ich jetzt tippe, okay, kann ich sagen, ich liebe. Und du kannst React sehen. Sie können sehen, wie es ausgelöst wird. Es druckt also bei jedem Tastendruck alles wenn ich hier drüben tippe. Okay? Also das ist es, was hier passiert. Nun der Wert hier drüben, den ich kommentiert habe, okay, es ist ein Eingabeattribut, das steuert, welcher Text im Eingabefeld angezeigt wird. Okay? Also, wenn ich es mit Null verbinde, wenn ich hier Null sage, wirst du hier Null sehen, so wie wir es gesehen haben. Und normalerweise wird ein Wertfeld verwendet , um ein bestimmtes Feld mit einer Zustandsvariablen zu verknüpfen. Okay? Wir haben noch keine Zustandsvariable erstellt, die wir gleich erstellen werden, aber aus diesem Grund wird der Wert verwendet und ich habe ihn kommentiert, bis wir den Status der Variablen haben, die erstellt werden, okay? Bei einer Änderung hier ist es ein Event-Handler, der die Änderung im Eingabefeld verfolgt. Jedes Mal, wenn der Benutzer eine Eingabe eingibt oder bearbeitet, wird die Funktion bei Änderung ausgelöst, sodass Sie den Status mit dem neuen Eingabewert aktualisieren mit dem neuen Eingabewert Okay? Also hier, im Moment, spielen wir noch nicht mit State, aber was wir tun, ist bei Änderung, wir sehen einen Handle-Wechsel, und diese Funktion wird jedes Mal ausgelöst , wenn es eine Änderung im Eingabefeld gibt. Und was tun wir, um mit Veränderungen umzugehen? Wir akzeptieren das Event-Objekt und sagen „ Ziel-Punktwert festlegen“, was uns den Wert gibt was uns , der dort im Textfeld steht, okay? E steht also im Grunde für das Ereignisobjekt, das an die Funktion übergeben wird, wenn das Ereignis eintritt, und ein Ereignis kann so etwas wie das Klicken auf eine Schaltfläche oder die Eingabe in ein Feld sein. Das sind einige grundlegende Informationen darüber, wie dieser Code bisher funktioniert. Okay? Also, was wir tun werden, ist , alles an einen Staat zu binden. Also ich sage const und ich sage Formulardaten. Das ist also eine Statistik, die ich gerade erstelle, und Formulardaten werden mir im Grunde helfen , die Daten für das gesamte Formular zu speichern Das Formular könnte also mehrere Felder enthalten. Im Moment haben wir ein einzelnes Feld. Wir könnten mehrere Felder haben und wir hätten oder wir könnten Formulardaten verwenden, um alles zu speichern. Okay? Also ich sage hier Formulardaten. Und was ich jetzt tun werde ist, dass ich hier use state verwenden werde, use state, so etwas, und ich werde das zu etwas initialisieren Okay. Also hier drüben, ich nehme ein Objekt. Ich initialisiere es als Objekt und verwende Schlüssel-Wert-Paare Okay. Also das wird leer sein. Der Name wird leer sein. Wenn es morgen mehrere Felder gibt, werde ich sicherstellen, dass ich dieses Objekt hier aktualisiere. Okay? Ich hoffe, das macht Sinn. Okay? Also das ist der Name hier drüben und ich werde ihn so haben. Okay? Also für mich sieht das besser aus. Okay. Also ja, das sind Formulardaten hier drüben, und was wir jetzt tun müssen, ist das, was ich tun würde, ich würde sagen, zum Handle Change, okay? Wir haben den Wert hier drüben , Zielwert, Zielpunktwert. Okay? Also, was ich tun werde, ist „Formulardaten festlegen“ aufzurufen. Weil ich bei jeder Änderung sicherstellen möchte, dass die Statusvariable die aktualisierten Daten enthält. Hier drüben sage ich Formulardaten. Also destrukturieren Sie zuerst die Formulardaten, welche Daten sie auch haben, fügen Sie sie hinzu Okay? Und dann fügen Sie eckige Klammern hinzu, Sie geben hier einen Punkt-Zielpunktnamen ein, okay, und Sie fügen einen Doppelpunkt und sagen E-Punkt-Zielpunktwert. Ups, Wert. Okay, diese Art von Vorschlag ist nicht gut, aber der Punktzielwert und ich füge ihn hier hinzu. Okay? Also, was diese Funktion oder dieser Code macht, ist hier drüben. Das ist also klar, wenn man das Handle Change nennt. Immer wenn Sie etwas in dem Feld ändern , wird Handle Change aufgerufen. Es übergibt das Event-Objekt, das die Details des gesamten Ereignisses enthält, richtig? Was wir hier also tun, ist dass wir festgelegte Formulardaten sehen. Okay, destrukturieren Sie die aktuellen Formulardaten. Okay? Mit diesem Spread-Operator sagen wir also, dass die vorhandenen Werte der Formulardaten beibehalten werden , damit sie sich von selbst verteilen. Okay? Und dann bekommen wir den Namen des Feldes hier drüben. Jetzt ist der Name hier drüben, wenn du nach unten scrollst, es ist Name , richtig, was auch das Attribut hier drüben ist, oder? Das Attribut und das hier sollten übereinstimmen. Der Name und dieser Name sollten mit dem Schlüssel hier drüben übereinstimmen, oder? Das passt also zusammen. Wir sehen also E-Punkt-Zielpunktname Doppelpunkt E-Punkt Zielpunktwert. Okay? Also wird es der Name Doppelpunkt, egal welchen Wert du eingegeben hast, okay? Und wenn Sie das hinzufügen, passiert das Feld, das sich geändert hat , weil es ein Feld ist, über das wir sprechen Das Feld, das sich geändert hat, wird in diesen verteilten Daten hier ersetzt diesen verteilten Daten hier ersetzt . Das ist es, was passieren wird Bei Formulardaten werden immer die neuesten vorhandenen Daten ausgewählt und der Status des Formulars aktualisiert. Lassen Sie uns testen, ob das gut funktioniert. Ich mache Hard Refresh. Okay. Und was ich tun werde, ist , okay, wir verwenden eigentlich Formulardaten. Okay? Was wir tun können, ist hier drüben, wir nutzen den Staat noch nicht. Okay? Also, was wir tun würden, ist, wenn du nach unten scrollst, wir sehen hier keinerlei Fehler. Hier im Wert. Lassen Sie mich das auskommentieren Jetzt haben wir einen Staat, richtig? Also kann ich den Punktnamen der Formulardaten sagen, ungefähr so. Wir binden das jetzt im Grunde an eine Zustandsvariable. Wenn ich aktualisiere, werden Ihnen keinerlei Fehler angezeigt und Sie können etwas eingeben. Du kannst also Test sagen. Sie können sehen, wie alles auf die Konsole kommt. Anstatt den Punkt-Zielwert zu drucken , können wir hier können wir versuchen, den Punktnamen des Formulars zu drucken. Okay. Lass uns Hard Refresh machen und dann kannst du Test sagen. Sie können sehen, wie die aktualisierten Daten eingehen. Okay, das ist ein Schritt dahinter, wir haben T eingegeben und T ist nicht reingekommen, weil die Aktualisierung für T erst erfolgt, nachdem der Wert gedruckt Okay? Also, wenn Sie diese Zeile verschieben nachdem Sie den Status hier aktualisiert haben. Okay, dann wirst du dir in diesem Fall die neueste Sache ansehen. Okay? Also wenn ich Test sage, kannst du sehen, uups, hier ist es immer noch dasselbe Okay, das liegt also daran, dass die Updates asynchron sind, okay? Und du bist tatsächlich in derselben Funktion. Du versuchst es auf der Konsole auszudrucken, okay? Aber der Status wird perfekt aktualisiert, okay? Es gibt kein Problem als solches, also werde ich dieses Konsolen-Punktprotokoll vorerst loswerden , okay? Lassen Sie uns nun die Einreichung hier erledigen. Okay. Also, was passiert, wenn Sie das Formular abschicken? In Ordnung. Nun, wenn Sie das Formular abschicken, sagen wir zuerst E Punkt Prevent Default. Okay. Also, was ist E hier drüben? Wir akzeptieren E nicht, also müssen wir das Elternteil akzeptieren. Entschuldigung, wir müssen den Parameter vom Typ E mit dem Namen E akzeptieren , was Event ist. Ich würde sagen, Standard verhindern, wir tun das, weil wir das Standardverhalten hier nicht haben wollen. Das Standardverhalten beim Senden in Browsern ist also das Neuladen der Seite. Das will ich nicht Okay? Also werde ich einfach Console Dot Log machen. Ich werde sagen, dass Formulardaten eingereicht wurden. Hier drüben und hier drüben, Formulardaten, so etwas in der Art. Okay, du hast das gemacht, und wenn du jetzt hier nach unten scrollst, okay, wir müssen hier eine Möglichkeit hinzufügen Leute das Formular abschicken können. Also, was ich tun werde, ist hier am Ende, ich werde einen Button haben. Okay, ich nenne das Absenden-Button, und der Typ dieser Schaltfläche ist Abschicken. Okay? Etwas wie das hier. Lass mich hier drüben auffrischen, S und auffrischen. In Ordnung. Und wir können sehen, der Name ist I Love React. Okay? Lass mich einreichen. Sie können die Formulardaten sehen und Sie können sehen, dass die Statusvariable aktualisiert wurde. Sie können sehen, dass der Name I Love React lautet. In Ordnung. Also ja, es funktioniert absolut gut, wie du hier drüben sehen kannst, okay? Wie ist dieser Staat, was ist dieser Staat? Was macht dieser Staat? Dieser Status verfolgt die Daten, die im Formular o vorhanden sind, und wir verwenden das Objekt, das aus Schlüsselwertpaaren besteht, oder? Und wie behält es den Überblick über die Daten? Es behält den Überblick mit Hilfe von On-Handle-Change. Also ein Handle-Change wird bei einem Change-Ereignis ausgelöst, okay? Wann immer es also eine Änderung im Eingabefeld gibt, wird die Änderung des Handles ausgelöst, und das Ding hier wird im Grunde aktualisiert. Es aktualisiert im Grunde die Formulardaten hier drüben. Du kannst sehen. Und Formulardaten werden immer auf dem neuesten Stand sein Was auch immer Sie eingeben, wird in den Formulardaten enthalten sein, okay? Und dann kümmert es sich um das Absenden. Wie geht es mit dem Einreichen um? Immer wenn dies aufgerufen wird, heißt es Prevent Default, und es wird nur der aktualisierte Wert in den Formulardaten gedruckt . Okay. Mal sehen, wie das funktioniert wenn du hier noch ein Feld hast. Okay. Nun, wenn Sie noch ein Feld haben, lassen Sie mich das einfach hier duplizieren . Ich nehme das. Anstatt des Namens habe ich jetzt eine E-Mail hier, okay? Und der Typ ist E-Mail. Okay. Ich sage E-Mail. Der Name ist auch E-Mail hier, Formulardaten Punkt E-Mail hier, und Handle Change ist derselbe. Okay? Formulardaten, Punkt E-Mail, also müssen wir hier noch einen Wert hinzufügen, richtig? Also sage ich es hier. Ich sage Komma und füge E-Mail hinzu, etwa so. Okay, das ist erledigt und ich werde es so machen. In Ordnung. Also das ist erledigt, oder? Ich habe jetzt auch E-Mail. Lassen Sie uns jetzt eine harte Aktualisierung durchführen, und ich kann iOveract eingeben Ich sage john at rate Hoppla, example.com. Lassen Sie mich einreichen. In dem Moment, in dem ich abschicke, siehst du den Namen I love react und die E-Mail lautet jon at rate example.com Ich hoffe, das macht Sinn. Nun, die Anzahl der Felder, die Sie haben, die Anzahl der Attribute, die Sie diesem Zustandsobjekt hier hinzufügen werden, okay? Also diese Formulardaten werden die Aufgabe übernehmen, die gesamten Formulardaten für Sie zu verarbeiten , okay? Und diese beiden Funktionen helfen Ihnen dabei, die Daten zu verwalten, okay, wie die Einreichung funktioniert, wie die Änderung funktioniert und alles. Okay? Und das Formular kann von Zeit zu Zeit weiter wachsen, oder? Ich hoffe, Sie konnten dem folgen, und ich hoffe, das war hilfreich. 3. Fehlerbehebung: Häufige Fallstricke in einfachen React-Formularen: Jetzt ist es an der Zeit, dass wir anfangen dieses Formular zu verbessern, das wir erstellt haben, oder? Und wir werden in diesem speziellen Formular einige Arten von Validierungen hinzufügen , oder Denn wissen Sie, wenn wir mit Formularen arbeiten, sind Formularvalidierungen üblich, und Sie möchten vielleicht die Daten überprüfen, die der Benutzer in die Formulare eingibt , oder Das werden wir also tun. Also, was ich hier machen werde, ist, hier drüben eine Funktion zu haben, definiert, okay? Ich werde const, validieren sagen. Okay. Also diese Validierungsfunktion ist hier eine Pfeilfunktion und ich werde die Logik in dieser Funktion haben. Also, was ich tun werde, ist, zuerst zu gehen. Die Validierung wird uns also Fehler geben, und wir sollten die Fehler vielleicht im Auge behalten. Also zuerst werde ich hier Const sagen. Ich werde einen Status namens Errors erstellen und ich werde Set Errors aufrufen Okay. Das wird uns helfen , den Überblick über all die Fehler zu behalten, die hier passieren, okay? Ich werde es mit leeren Schlüssel-Wert-Paaren initialisieren , okay Und innerhalb von Validate werde ich ständig neue Fehler erzeugen und ein leeres Schlüssel-Wert-Paar-Objekt erstellen, okay Ordnung. Und jetzt sage ich ob ich Formulardaten sehe. Ich muss überprüfen, ob der Name vom Benutzer eingegeben wurde oder nicht. Ich möchte den Namen als Pflichtfeld angeben. Also sage ich Formulardaten Punktname Punkt Trim. Okay. Falls dieser Wert nicht existiert, so füge ich ein Ausrufezeichen Wenn dieser Wert nicht existiert , sucht diese Bedingung danach. Ich sage, neue Fehler, Punktname, und ich sage, Name ist erforderlich. Okay? Also sage ich, ein Name ist erforderlich, etwa so. Ordnung. Und ich würde neue Fehler zurückgeben. Okay. Also würde ich neue Fehler zurückgeben, oder? So etwas in der Art. Diese Funktion erzeugt also Fehlermeldungen. Es validiert und erstellt Fehlermeldungen und gibt uns das Schlüssel-Wert-Paar zurück, sollte ich sagen Was hier also passiert , sind neue Fehler, Punktname. Das wird also ein Namensattribut mit dieser Nachricht haben . Aber es gibt uns im Grunde ein Objekt mit allen Fehlermeldungen, und der Schlüssel ist im Grunde der Name des Feldes hier drüben, nämlich das Namensfeld. Hier können Sie also sehen, dass dies das Namensfeld ist. Richtig? Also, was wir tun müssen ist, diese Validierung hier drüben auszulösen. Okay? Also, wann sollten wir validieren auslösen? Also werden wir sehen, ob wir abschicken müssen. Okay? Ich sage Const, Validierungsfehler Okay, Validierungsfehler sind gleichbedeutend mit Validieren, okay? Etwas in der Art. In Ordnung. Und ich werde sagen, ob ich überprüfen muss, ob es Validierungsfehlern irgendwelche Schlüssel-Wert-Paare gibt. Also sage ich Schlüssel, die vom Objekt gelehrt wurden. Also, wenn das Objekt bei der Überprüfung die Schlüssel eingibt, okay. Die gelernte Länge ist hier größer als Null. Okay. Dann müssen wir tatsächlich sagen, dass Fehler gesetzt wurden. Okay, ich setze Fehler und ich sage Validierungsfehler. So wie. Okay. Andernfalls werden wir das Formular abschicken, richtig? Wenn es keinen Validierungsfehler gibt, müssen wir das Formular abschicken. Also Hoppla Also ich lasse dieses Ding einfach hier drüben und ich schneide es aus und verschiebe es in den SE-Block, weil das Formular nur eingereicht werden muss , wenn es keine Validierungsfehler gibt Ordnung? Etwas wie das hier. Es ist erledigt. Okay. Und ja, ich glaube, das ist es. Wir müssen auch die Fehlermeldungen anzeigen. Okay? Also scrolle ich hier runter. Okay. Und hier, direkt neben dem Namen, okay? Direkt neben dem Namen auf dem Henkelwechsel. Okay, ich werde einen Code hier drüben haben. Ich werde hier „Fehler straff“ sagen, Namen. Wenn Fehler den Punkt Name angeben, und ich verwende logisches und, und ich sage Span und ich beende einfach das span-Tag hier drüben und sage Fehler, Tt, Name, so etwas Okay. Also, wenn es jetzt einen Fehler gibt, wird er hier angezeigt, okay? Also das wird nur angezeigt , wenn das wahr ist. Wenn Fehler nur Punktname existieren , wird dies angezeigt. Andernfalls wird es nicht angezeigt. Okay? Wenn ich das einreiche, sehe ich momentan nichts. Also es funktioniert wahrscheinlich nicht, weil ich glaube, dass ich hier in Trim einen Fehler gemacht habe. Trim ist also im Grunde eine Funktion. Ich vermisse diesen Prozess der offenen und schließenden Runde. Okay. Lass mich mich erfrischen. Und wenn ich „Senden“ sage, werden Sie sehen Name erforderlich ist. In Ordnung. Und es wird auf seltsame Weise angezeigt , weil ich buchstäblich kein CSS verwende. Okay, sehr einfaches CSS. Aber du verstehst, wie das funktioniert, okay? Sie können CSS nach Ihrer Wahl hinzufügen , wenn Sie möchten. In Ordnung. Also was ich machen kann ist hier drüben, ich kann sagen Stil hier drüben, hier selbst. Ich kann sagen, ich kann Farbe sagen, richtig. So wie das. Okay, du kannst also sehen, dass es jetzt rot ist, oder? Und ja, die Fehler werden angezeigt, okay, hier drüben. Um Dinge in einer neuen Zeile anzupassen oder hier einen Zeilenumbruch zu haben, kann ich, nachdem das Span-Element gerendert wurde, hier ein Zeilenumbruch-Tag wie folgt hinzufügen. Okay. Dadurch wird sichergestellt, dass alles in der neuen Zeile ist, richtig, und die Fehlermeldung wird auf diese Weise angezeigt. Aber Sie können sehen, wie der Name eingegeben wird, und ich kann ihn eingeben. Ich kann „Testen“ sagen und „Abschicken“ sehen. Okay? Ups, es ist immer noch da. 1 Sekunde Lass mich nachschauen. Also teste. Das funktioniert gut. Und wenn ich das loswerde, okay, das ist nicht da. Und wenn ich dann eintippe, ist das immer noch da. Das wird also nicht gelöscht, weil die neuen Fehler oder der Fehlerstatus hier nicht gelöscht werden. Okay, wir aktualisieren also nicht während ich die Daten eintippe, oder? Also, was wir tun müssen, ist hier auf Handle Change, okay, während wir die Daten eintippen oder abschicken. Okay, also es ist am besten , wenn ich das hier beim Handle Change erledige. Also hier in Handle Change werde ich hier ein Konzept erstellen. Okay, und ich werde einen Namenswert haben. Okay. Und ich sage, wir haben ein Ziel. Okay? Also, ich erhalte den Feldnamen und den Wert , wo die Änderung stattfindet. Okay? Das mache ich hier drüben damit, okay? Und dann, nachdem die Formulardaten festgelegt wurden, werde ich sagen, okay, wenn es einen Wert für Fehler gibt , und den Namen, okay, wo die Änderung stattfindet. Okay. Dann sag in diesem Fall const new errors, o und ich destrukturiere die bestehenden, okay. Restrukturieren Sie die bestehenden. In Ordnung. Und dann können wir sagen, neue Fehler löschen und ich sage Name. Okay. Das ist ein bisschen umständlich hier drüben. Okay? Und ich sage Fehler setzen, und ich setze das neue Fehlerobjekt, ich sage neue Fehler. So wie es ist. Okay. Das ist erledigt. Und jetzt, wo wir uns ändern, werden Sie sehen, dass der Fehler behoben wird. Okay? Wenn ich das loswerde und „Senden“ sage, ist ein Name erforderlich, und wenn ich sage, dass ich React liebe, ist der Fehler weg. Sie können sehen, wie dynamisch das ist. Okay. Sie können dies aktualisieren und auch für andere Bereiche verbessern. Aber für dieses einzelne Feld hattest du auch so viel Arbeit, oder? Sie können sich also vorstellen, wie komplex Validierungen hier werden können. Okay. Also das Ziel hier, all das zu machen und es dir zu zeigen, war, dir zu zeigen, wie Formulare in React eingebaut werden können , ohne hier irgendeine Bibliothek zu benutzen , wie Hook-Formulare, okay? Also, wenn Sie Formulare selbst in React verwalten, ist das alles, was Sie tun müssen, okay? Sie können sich ein Formular mit nur zwei Feldern vorstellen, in das Sie so viel schreiben mussten. Es gibt eine Menge Code-Duplikate, oder? Bei mehreren Feldern wird die Handle-Change-Funktion also an Größe zunehmen, oder? Da wird eine Menge Code drin sein. Für die Validierung musst du weitere Validierungen hinzufügen, okay? Also fügen wir hier zum Beispiel eine Validierung in der Validierungsfunktion für den Namen hinzu , okay? Sie müssen eine ähnliche Validierung auch für E-Mails hinzufügen. Okay? Nun, E-Mail, wenn Sie eine komplexe Validierung hinzufügen möchten, z. B. nach der Rate und dem E-Mail-Format suchen möchten, müssen Sie das alles schreiben. Okay. Also das wird hier eine Menge Komplexität hinzufügen. Diese Methode wird auch wachsen, okay? Und stellen Sie sich vor, wie das Rendern bei vielen Feldern aussehen wird, oder? Es wird knifflig werden. Also ja, das ist das Problem, das ich hier hervorheben möchte. Nun, ein Ansatz wäre gewesen es dir direkt zu zeigen, indem du React-Hook-Formulare benutzt und dir erklärt hast, wie einfach es zu benutzen ist, okay? Aber ich wollte zuerst den harten Weg gehen, okay? Sie verstehen das zuerst, wenn es darum geht, wie Dinge in React mithilfe von JavaScript verwaltet werden Okay. Also verwende ich auch JavaScript-Code und hier auch JavaScript-Code und reagiere auf Funktionen wie Zustände. Okay? Wie die Dinge in React mit JavaScript verwaltet werden. Okay, das musst du zuerst verstehen. Erst dann wirst du die Wichtigkeit verstehen. Wenn Sie das also durchgehen, werden Sie erst dann verstehen , wie wichtig React-Hook-Formulare oder eine andere Bibliothek zu verwenden , oder? Das ist also etwas, das ich hervorheben wollte. In Ordnung. Ich hoffe, Sie haben eine Vorstellung davon, wie Sie mit React und JavaScript Validierungen durchführen, Einreichungen bearbeiten und Fehlermeldungen verwalten können verwalten mit React und JavaScript Validierungen durchführen, Einreichungen bearbeiten und Fehlermeldungen 4. Power freisetzen: Ein tiefer Eintauchen in die React-Hook-Form: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen über React-Hook-Formen zu sprechen. Wenn Sie also das React-Hook-Formular googeln, werden Sie zu dieser Webseite weitergeleitet, oder Sie finden diesen Link auf google.com oder einer beliebigen Suchmaschine Ihrer Wahl Also reacthokfm.com. Das ist die Website hier drüben. Notieren Sie sich unbedingt die Bindestriche hier. Okay? Nun, das werden wir hier verwenden, und Sie können sehen, dass es sich um eine flexible, umfangreiche und benutzerfreundliche Lösung mit Validierung für Reaktionsformulare handelt. Alles klar? Es gibt viele Funktionen , die sie hier hervorheben. Sie haben hier auch eine Code-Sandbox-Version , die du bearbeiten und damit herumspielen kannst, okay? Und du kannst die Funktionen sehen, es isoliert das Rendern. Es gibt also Minimierung des Renderings, okay? Du abonnierst, okay? Leistung ist also ein wichtiger Aspekt der Benutzererfahrung. Sie können also einzelne Eingabefelder abonnieren ohne das gesamte Formular erneut zu rendern, okay? Also hier drüben wird es schnell gezählt. Es bietet also viele Vorteile im Vergleich zum herkömmlichen Formularmanagement und React Und wenn Sie anfangen, finden Sie hier einige Codefragmente. Okay? Sie können es also für JavaScript, Typoskript verwenden , okay, je nach Ihren Anforderungen Ordnung. Also wähle ich hier JavaScript aus, weil du React verwendest. Und hier können Sie es auf diese Weise installieren. Es ist also eine externe Bibliothek, die Sie verwenden und den NPM-Paketmanager Sie können sie auf Ihrem System installieren und hier zu Ihrem Projekt hinzufügen. Okay. Nun, hier sind ein paar Dinge, die Sie beachten müssen, wenn es darum geht, wie es funktioniert. Das Erste ist also, wenn Sie ein Formular erstellt haben, okay. Als Erstes müssen Sie diesen Hook importieren. Okay, du musst diesen Hook hinzufügen. Dann musst du dir diese Funktionen besorgen , je nachdem, was du willst, okay? Also Funktion registrieren. Es gibt verschiedene Funktionen , die Sie von Use Form und Use Form erhalten , die Sie von React Hook Form hier erhalten. Okay. Nun, Register ermöglicht es Ihnen, ein Eingabeelement oder ein beliebiges Element zu registrieren , im Grunde genommen, um Hook-Formen zu reagieren. Und wenn Sie sich registrieren, passiert die Validierung und alles wird verwaltet, sogar die Einreichung wird von React-Hook-Formularen verwaltet. Okay? Mit Register können Sie React Hook Forms anweisen , dieses bestimmte Element innerhalb des Formulars für Sie zu verwalten , okay? Es kümmert sich auch um das Senden. Hier haben Sie also, wie Sie sehen können, das Absenden handhaben, und Handle Submit übernimmt jede Funktion Ihrer Wahl, die Sie übergeben. Okay? Also das ist eine Funktion, die wir weitergeben. Es ist eine Pfeilfunktion. Und welche Funktion Sie auch immer übergeben, sie wird nach den Validierungen und allem anderen durch React-Hoop-Formulare ausgelöst nach den Validierungen und allem anderen durch React-Hoop-Formulare Okay? Und außerdem, wenn du hier drüben siehst, bist du auf diesem Feld. Sie können den erforderlichen Doppelpunkt „Wahr“ sehen. Okay? Also, wenn du willst, dass dieses Feld verpflichtend ist, okay, dann kannst du hier drüben den erforderlichen Doppelpunkt als Attribut angeben, okay? Und es heißt, Validierung mit erforderlichen, okay und anderen Standard-HTML-Validierungsregeln einbeziehen , okay? Und Sie können die Fehler auf diese Weise anzeigen. In Ordnung. Sie können sehen, wie Fehler angezeigt werden . Fehlerbeispiel erforderlich. Sie haben also hier Zugriff auf Fehler. Okay. All das wird automatisch erledigt, und wenn Sie hier nach unten scrollen, wenn Sie auf Validierung anwenden gehen, können Sie sehen, dass dies alle Validierungsfelder sind. Okay, Sie können sehen, das sind alle erforderlichen Muster für die Validierungsfelder. Wenn Sie irgendeine Art von Musterabgleich durchführen möchten. Okay, wenn Sie einige benutzerdefinierte Validierungsregeln haben, können Sie das tun. Sie können Minimum und Maximum für einen Wert hier oder für ein Feld hier angeben. All das, ohne viel Code zu schreiben, Sie müssen nur angeben, was Sie wollen und alles andere ist erledigt. Stellen Sie sich jetzt vor, Sie machen das in Vanilla-JavaScript, oder? Ohne React-Hook-Formulare zu verwenden. Okay, stell dir vor, das zu tun, oder? Wir haben das also bereits in einer dieser Anwendungen gemacht, die Sie hier sehen. Okay, also ich komme zurecht. Ich habe dieses Formular hier drüben und ich verwalte das alles, also lass es mich im Vollbildmodus sehen, und ich verwalte alle Fehler und Validierungen hier, Fehlermeldungen hier drüben mit diesen Funktionen, okay Und ja, für nur zwei Felder gibt es da eine Menge Code, oder? Also, was ich tun werde, ist ein sehr einfaches Formular , das ich bereits habe. Was ich tun werde, ist , dieses Formular zu kürzen, um React-Hook-Formulare zu verwenden . Und Dinge wie Validierung und s werden wir hier drüben über all das erfahren , okay? Also ja, das ist etwas , das wir behandeln werden. Okay? Also, was ich tun werde, ist, als Erstes React-Hook-Formulare zu installieren. Also kannst du das kopieren, okay? Also komm her, geh rüber zum Terminal. Okay. Und Sie können dieses Ding hinzufügen oder es im Stammverzeichnis Ihres Projekts ausführen . Sobald Sie dies getan haben, wird es ein wenig Verarbeitung je nach Ihrer Internetverbindung, Geschwindigkeit und Ihrem System ein wenig Verarbeitung geben, aber es sollte schnell installiert werden. Ich werde das jetzt minimieren. Und wenn du herkommst, um Jason zu packen, wirst du sehen, dass React-Hook-Formulare hinzugefügt werden. Also lass mich herkommen. Du kannst das React-Hook-Formular sehen, oder? Das wurde also zu unserer Liste der Abhängigkeiten hinzugefügt . In Ordnung. Und was wir jetzt tun müssen, ist, dass wir eine Menge Funktionen eingerichtet haben , um Änderungen beim Senden, Validieren und all das zu verarbeiten . Das alles brauchen wir nicht. Ich werde das alles loswerden. Okay? Ich lösche das alles einfach. Ich werde dieses Beispiel hier runterschneiden, okay? Beim Absenden reichen wir etwas ein, okay? Wert, den wir auch nicht brauchen. Also wird dieses Eingabefeld auch hier gekürzt. Okay. Okay. werde ich das alles loswerden. Also hier. Okay, das wird jetzt ein sehr einfaches Eingabefeld sein, okay, Eingabe und Hoppla Also ich denke, ich werde einen selbstschließenden Tank haben. Ich werde das loswerden, okay? Okay. Und ich muss mich nur eine Sache machen lassen. Ich werde den Button einfach hier drüben haben, okay? Oder ich habe nur die Etiketten. Ich werde diese Eingabefelder hier loswerden. Okay? Ich nehme nur die Etiketten. Okay, ich habe das Etikett hier drüben. Ich habe das Etikett hier drüben. Okay, ich werde alle Eingabefelder los. Es gibt eine Schaltfläche zum Absenden, die zum Absenden des Formulars benötigt wird. Das ist es. Ich habe gerade viel aufgeräumt Ich werde einfach auch die Eingabe oben loswerden. Wir werden neue Eingaben machen, wann immer wir sie brauchen, okay? Ich brauche auch nicht Handle Submit, okay? Nun, das ist ein Formular, für das ich eine ziemlich einfache, gekürzte Version habe . Okay. Ich werde das einfach entfernen. Das Formular enthält noch nichts. Ich habe keine Eingabefelder hinzugefügt. Okay? Nun, als Erstes müssen wir das React-Hook-Formular verwenden. Also werde ich hier Import, Formular verwenden sagen . Sie können diesen Vorschlag sehen. Verwenden Sie das Formular aus dem React-Hook-Formular. Also wähle ich das einfach aus und du musst den Import hinzufügen. Okay. Was du jetzt tun wirst ist wir brauchen, ich sage Const Wir müssen uns registrieren, und ich sage, benutze das Formular hier drüben. Also, mit diesem Hook, okay, ich muss importieren oder ich brauche diese beiden Funktionen. Also registriere dich und ich sage Handle Submit, okay? Also das sind die beiden Funktionen oder Eigenschaften, die man sagen kann. Okay. Dies sind die beiden Funktionen , auf die Sie Zugriff benötigen, okay, über das Anwendungsformular. Okay, und genau das machen wir hier. Nachdem wir also Zugriff auf diese beiden Funktionen wie Registrierung und Bearbeitung Absendens haben, okay, werden wir darüber sprechen. Was ist also registrieren? Okay? Warum brauchst du dich registrieren? Register ist also eine Funktion , die innerhalb des Use-Form-Hooks bereitgestellt wird, der bereitgestellt wird, um das React-Hook-Formular auszuspionieren, und sie wird verwendet, um die Details zu registrieren , die das React-Hook-Formular verarbeiten soll. Okay? Wenn es beispielsweise ein Eingabefeld gibt, möchten Sie dieses bestimmte Feld möglicherweise mit dem React-Hook-Formular registrieren dieses bestimmte Feld möglicherweise mit dem . Und warum möchtest du dich registrieren? Weil Sie möchten, dass das React-Hook-Formular die Validierung, Einreichung und alles verwaltet . Sie möchten, dass das React-Hook-Formular die Änderungen in jedem Eingabefeld und all dem verfolgt . Okay, aus diesem Grund würdest du React sagen wollen, dass Formular, hey, dieses spezielle Feld für mich verwaltet, oder? Wie würdest du das sagen? Das machst du mit Hilfe von Register, hier drüben. Okay? Also lass mich hier ein Eingabefeld hinzufügen. Also sage ich hier einfach Eingabe, etwa so. Okay? Und ich füge ein selbstschließendes Etikett hinzu. Ich brauche das nicht. Okay. Und hier drüben sage ich, ich füge Doppelpunkt hinzu, tut mir leid, nicht Doppelpunkt. Das sind runde Klammern. Ich sage kostenlose Punkte und registriere mich. Okay. Und hier gebe ich einen Namen weiter, so etwas wie das hier. So registrierst du dich. Okay? Also das ist erledigt, okay? Wir haben Register hinzugefügt, und was Sie jetzt tun können ist, dass wir eine On-Submit-Funktion haben, sodass ich beim Absenden Const sagen kann, ich werde hier die Pfeilfunktion verwenden Okay, so etwas und ich sage Console Dot Log. Okay? Loggen. Ich sage hier Daten. Okay? Also das sind Formulardaten, die ich hier protokollieren möchte. Kümmere dich jetzt um das Absenden. Also müssen wir Handle Submit sagen, hey, benutze diese Funktion, um das Senden für mich zu erledigen. Okay? Also, was ich tun werde, ist , hierher zu kommen, um ein Formular zu erstellen, ich sage Handling Submit Ups. Also 1 Sekunde Ich sage zunächst beim Absenden. Okay. Und du sagst „ Abschicken bearbeiten“ und du sagst „ Abschicken“, so etwas in der Art. Okay? Das ist erledigt. Okay? Nun, was passieren wird , ist, dass bei jeder Übermittlung diese Funktion mit den Daten ausgelöst wird. Okay? Lass uns sehen, ob das gut läuft. Okay? Werde das überprüfen. Also gehe ich zur Konsole. Ich mache es hart oder frisch. Ich lösche das und sage Test abschicken. Sie können Name als Test sehen und wie viele Codezeilen Sie schreiben mussten. Okay? Du musstest das nur registrieren. Zuallererst mussten Sie vor der Registrierung einige Hausarbeiten erledigen und Reaktorformulare importieren. Du hattest Zugriff auf dieses Register und hast das Formular zum Abschicken von Use bearbeitet, okay? Und dann hast du einfach deinen Namen registriert und jetzt bekommst du die Daten hier drüben. Okay? Nun, E-Mail ist nicht registriert, also lass mich hier auch E-Mail hinzufügen. Okay? Also, wenn ich E-Mail sage, okay. Und das ist E-Mail für mich, okay. Und wenn ich dieses Eingabefeld nicht registriere, funktioniert es nicht, aber ich muss mich registrieren. Also sage ich drei Punkte, wie lautet die Syntax? Ich sehe „Registrieren“ und gebe hier die E-Mail-Adresse an. Ich werde das speichern. Sobald Sie das tun, wenn Sie die Seite aktualisieren ich abschicke, werden Name und E-Mail leer angezeigt. Okay? Nun, welche Änderungen auch immer passieren, okay, Test und A, Sie werden sehen, dass beide in den Daten auftauchen. Okay? Du machst kaum etwas. Sie verwalten keine Staaten, Sie tun nichts. Okay? Du hast gerade gesagt, dass React-Hook-Formulare , hey, das registrieren und das für mich erledigen. Okay? Also, React Hook Form erledigt im Grunde alles für mich, für dich. Sie haben kein Absenden, Sie sagen, Absenden bearbeiten. Das ist das Handle Submit aus dem React-Hook-Formular, und du gibst die Funktion an, die bei der Einreichung ausgelöst werden muss , okay? Weil Sie vielleicht eine benutzerdefinierte Einreichung oder eine benutzerdefinierte Methode zum Senden von Daten haben, oder? Vielleicht möchten Sie einen EPI-Anruf tätigen oder so. Also, nachdem alle Validierungen und alles erledigt sind, okay, diese Funktion wird mit den Daten aufgerufen Ordnung. Also, um alles auszudrücken oder zusammenzufassen, okay? Use form initialisiert die Formularbehandlung mit React Okay? Das ist es, was wir tun. Registrieren, wir verwenden, um die Eingabefelder für die Formularverwaltung zu registrieren. Handle submit erledigt die Aufgabe die Formularübermittlungen und die Formulardaten für uns zu sammeln. Und on submit ist eine benutzerdefinierte Funktion , die beim Absenden des Formulars ausgelöst wird und die Formulardaten auf einfache Weise protokolliert. Alles klar? Nun, die Verwendung von React-Hook-Formularen bietet viele Vorteile, okay. Der erste Vorteil, den Sie an diesem Code erkennen können , ist weniger Boilerplate-Code Sie müssen nicht viel Code schreiben, um Ihre Formulare zum Laufen zu bringen Weniger Standardcode, und Ihre Komponente sieht auch einfach aus, oder? Bessere Leistung Bessere Leistung bedeutet nun, dass Rendern bei jeder Wertänderung minimiert Also, wenn es irgendeine Art von Wertänderung gibt, wenn du irgendwas in dem Feld hier drüben änderst, okay? Bei der herkömmlichen Formularverarbeitung und Reaktion wird die Komponente neu gerendert. Aber bei React to Forms besteht die Komponente darin, dass das Formular nicht jedes Mal neu gerendert wird , wenn Sie in ein Feld tippen Dadurch wird Ihr Formular schneller, insbesondere bei großen Anwendungen. Validierungen werden vereinfacht. Wir haben uns noch nicht mit Validierungen befasst, aber Dinge wie die Überprüfung, ob ein Feld ausgefüllt ist, oder die Überprüfung, ob All diese Standardvalidierungen sind eingebaut. Sie müssen nur ein Wort hinzufügen und den React-Hook-Formularen nur sagen, dass, Hey, diese Art der Validierung durchführen, und das war's. Das tut es für dich, oder? Du musst die Dinge für diese Standardkram nicht manuell schreiben , oder? Insgesamt macht es die Handhabung von Formularen also sehr einfach. Es macht es einfach, Formulardaten zu sammeln und zu verfolgen, und Sie müssen den Status nicht für jedes Eingabefeld manuell aktualisieren, wie Sie es und Sie müssen den Status nicht für jedes Eingabefeld manuell aktualisieren , wie Sie bei normalen React-Formularen tun. Ordnung. Kurz gesagt, es macht dein Leben viel einfacher. In Ordnung? Ich hoffe, Sie sind beeindruckt von den React-Hook-Formularen, und ja, wir werden uns eingehend damit befassen. Und es wird häufig verwendet. Sie werden das also auch in vielen Projekten sehen. 5. Echtzeit-Insights: Formularwerte mit React-Hook-Formular: Hallo, da. Jetzt ist es an der Zeit, dass wir anfangen, über das Beobachten von Werten mit React-Hook-Formen zu sprechen. Was bedeutet es nun, Werte mit React-Hook-Formularen zu beobachten ? Es wird also Szenarien geben, in denen Sie verfolgen möchten, welchen Wert der Benutzer Sie verfolgen möchten, welchen Wert der Benutzer während der Eingabe als Eingabe angibt, oder? Und du willst, dass es so ist, vielleicht möchtest du , dass es ein bisschen in Echtzeit ist, oder? Und hier kommt die Uhr ins Spiel. Also, was ist Uhr? Watch ist eine Funktion, wie du an dem Beispiel hier sehen kannst, okay? Es wird uns über das React-Hook-Formular zur Verfügung gestellt, und damit können Sie sich jeden Wert ansehen, okay? Also, wann immer Sie ein Feld registrieren, okay, geben Sie ihm einen Namen, oder? Bei der Registrierung sagst du also, registriere dieses Feld, und das ist der Name des Feldes , mit dem ich es registrieren möchte. Okay? Also hier, in diesem Beispiel auf der Website, können Sie sehen, dass das Eingabefeld als Beispielname registriert ist , oder? Sie importieren also die Watch-Funktion hier drüben und sagen dann „Beispiel ansehen“. Wenn Sie nun etwas in Register hier in dieser Registereingabe eingeben, wird dies ausgelöst und Watch hat den aktuellen Wert von allem, was Sie gerade tun. Es geht also im Grunde darum, im Auge zu behalten, was mit dieser Eingabe passiert und welcher Wert eingeht. Lassen Sie uns das in der Praxis ausprobieren, um ein besseres Verständnis zu bekommen. Also werde ich zu unserer Anwendung wechseln. Wir haben diese einfache Anwendung, in der wir Reaktionsformulare verwenden. Ein paar Felder, die wir verwenden, Eingabe, Name und Eingabe-E-Mail. Okay? Nun, der Name ist hier mit diesem Namen registriert, und die E-Mail ist mit dem Namen E-Mail registriert. Alles klar? Also, wie beobachten wir den Wert? Der erste Schritt ist also, dass wir die Uhr eingeben oder wir fügen hier die Uhr hinzu, okay? Und dann hier drüben, was wir tun können, ist, dass ich Watch sagen kann und hier drüben kann ich Name sagen, so etwas Ich möchte den Namen sehen. Ich kann den Wert hier einer Variablen zuweisen oder mich den Wert einfach protokollieren lassen. Lassen Sie uns sehen, was passiert. Okay? Also sage ich Konsole. Ups, Console Dot Log hier drüben und so etwas Okay. Lass mich einfach sparen. Man kann Undefined reinkommen sehen. Okay. Jetzt kannst du als iPane sehen, wie es ausgelöst wird Du kannst es sehen, oder? Schau zu, wie es ausgelöst wird. Was auch immer ich eintippe, du kannst es sehen, zum Beispiel die Ausgabe hier auf der Konsole. Das ist Uhr für dich, oder? Das ist also Uhr. Jetzt hast du hier noch ein Feld, nämlich E-Mail, richtig? Jetzt, auch wenn die E-Mail eingegeben ist, okay? Ich tippe hier E-Mail ein. Okay. Also hier wird nicht nach E-Mails Ausschau gehalten, oder? Vielleicht möchten Sie auch eine E-Mail-Uhr hinzufügen, und Sie können dies mit derselben Syntax tun, oder? Anstatt den Wert von Name auf diese Weise protokollieren zu lassen, würde ich empfehlen, dass Sie Use Effect, Use Effect Hook verwenden. Also was ich normalerweise tun würde, ist, das zu kommentieren. Okay. Lass mich das kommentieren. Ich würde sagen, Const hat hier den Namen gesehen, ok. Und ich weise das auf Watch zu und sage Name Okay. Also wollen wir den Use-Effekt nutzen. Ich sage const, beobachtet. E-Mail hier drüben und ich sage E-Mail ansehen. Also schaue ich mir gerade beide Felder an. Ich will das machen. Ich werde den Use-Effekt nutzen. Jetzt gibt es einen Grund, warum ich Use Effect verwende, weil ich die Protokollierung des Werts für Namen von meiner Renderlogik trennen möchte die Protokollierung des Werts für Namen , genau hier drüben. Und die Verwendung von Use Effect ist eine gute Methode für all diese Nebenwirkungen. Ich werde Use Effect nutzen. Das ist eine Syntax. Ich habe hier eine Pfeilfunktion, wie diese, und ich habe eine solche E-Abhängigkeit. O Das ist eine Syntax. Okay. Was wir tun werden, ist hier innerhalb dieser speziellen Logik, ich sage Log hier, Konsolen-Log, und ich sage Name, Wert, Name und ich sage überwachter Name, ungefähr so. Okay. Und ich werde das loswerden und hier sage ich überwachter Name. Wann immer sich der Name der Uhr ändert, dieser Use-Effect-Hook ausgeführt und der Wert des Uhrnamens wird ausgegeben. Du kannst noch einen Hook wie diesen haben, füge ihn hier hinzu. Okay? Und das könnte mit einer E-Mail verknüpft sein. E-Mail. Okay. Sie können also sagen: angesehene E-Mails, angesehene E-Mails, so etwas. Ich werde es jetzt aktualisieren, du kannst Namen sagen , so wie du sagen kannst: Ich liebe, reagiere. Sie sehen, der Name wird hier gedruckt. E-Mail, Sie können E-Mail an t example.com sagen. So können Sie sehen, wie Sie die Werte beobachten , und wenn Sie sie einreichen, sehen Sie, wie die Daten gedruckt werden Die Frage ist nun, was passiert? Okay. Die Frage ist also eigentlich, was passiert und warum Sie Watch verwenden möchten. Was sind die wirklichen Anwendungsfälle? Okay? Das Erste, wenn Sie das Feld mit den React-Hook-Formularen registrieren , registrieren Sie es tatsächlich mit einem Namen, oder? Name hier ist Name und hier drüben ist Name E-Mail. Okay? React-Hook-Formular identifiziert dieses Feld also als Name und E-Mail. Wenn Sie sich nun die Werte ansehen möchten, können Sie diese importieren oder diese Funktion aus dem Reaktorformular abrufen und sie auf diese Weise ansehen. Nun, jede Art von Änderung in Bereich wird dieses Update hier auslösen, und das ist komplett in Echtzeit. Okay? Nun, wenn Sie diese Felder anzeigen möchten, empfehle ich, Effecto hier zu verwenden. Weil das das Drucken von Werten und das Rendern der Logik trennt , okay? Also, warum sollten Sie das nutzen wollen? Okay? Also die erste Sache ist das bedingte Rendern. Sie können also zusehen, wie Teile Ihres Formulars auf der Grundlage der vom Benutzer eingegebenen Werte bedingt gerendert Teile Ihres Formulars auf der Grundlage der vom Benutzer eingegebenen Werte Okay? Zum Beispiel das Ein- oder Ausblenden zusätzlicher Felder basierend auf der E-Auswahl. Okay? Also so etwas, wenn es hier verschiedene Felder gibt. Also hier haben wir Input. Wenn Sie hier oder ein Dropdown oder ein Optionsfeld ausgewählt haben. Dann können Sie sich den Wert dessen ansehen, was gerade passiert. Und je nachdem, was der Benutzer bei der Eingabe auswählt, okay, Sie können das Formular unter bestimmten Bedingungen rendern Und das in Echtzeit noch bevor die Daten übermittelt werden. Richtig? Das ist also ein Anwendungsfall. Live-Validierung, vielleicht möchten Sie hier eine Live-Validierung haben , während der Benutzer den Namen eingibt, okay? Und wenn er geht oder versucht, eine Zahl einzugeben, möchten Sie vielleicht sofort eine Fehlermeldung anzeigen, dass, hey, Nummer nicht erlaubt ist. Der Name darf zum Beispiel nicht numerisch sein. Sie können also all diese Arten von Live-Validierungen durchführen oder Hinweise anzeigen, während der Benutzer sie eingibt Wenn der Benutzer also einen Titel eingibt, sagen wir, der Titel ist ein Feld Und wenn Sie einen sehr langen Titel eingeben, können Sie einen Hinweis darauf haben, dass, hey, das länger als zehn Zeichen ist, okay, nicht zu empfehlen, so etwas in der Art können Sie einen Hinweis darauf haben, dass, hey, das länger als zehn Zeichen ist, okay, , oder? Es ist kein Fehler, sondern ein Vorschlag an einen Benutzer oder ein Hinweis , wie Sie den Titel in Ihrem Formular verbessern können , okay? Komplexe Formen. Wenn Sie also komplexe Formulare haben, kann Watch für mehrstufige Formulare verwendet werden , um die Daten bei jedem Schritt zu überwachen und zu validieren die Daten bei jedem Schritt bevor Sie fortfahren und sogar bevor das Formular gesendet wird. Das sind also einige der direkten Anwendungsfälle von Watch, okay? Und ich glaube, Sie können sich vorstellen, wie nützlich das ist, oder? Und es ist sehr nützlich, weil es ziemlich effizient in Echtzeit ist und mit minimalem Code sehr einfach zu bedienen ist. Wir haben buchstäblich sehr weniger Code geschrieben, okay. Dieser Code dient buchstäblich zum Ausdrucken der Werte, okay? Dies ist nicht erforderlich, wenn Sie nicht drucken möchten, aber das ist buchstäblich das, was es ist. Okay, du hast gerade die Uhr bekommen und nutzt die Uhrfunktion hier drüben, richtig? Ich hoffe, das ist nützlich. Und hier bei US Effect sind diese beiden US-Effekt-Hooks getrennt, weil bei der Änderung des Uhrnamens ausgelöst werden, und sie werden bei der Änderung der E-Mail-Adresse der Uhr ausgelöst. In Ordnung. Also ich hoffe, das ist nützlich und ich hoffe, Sie konnten mitmachen. 6. Nahtlose Benutzererfahrung: Validierungen in React-Hook-Form hinzufügen: Jetzt ist es an der Zeit, über Validierungen mit dem React-Hook-Formular zu sprechen über Validierungen mit dem React-Hook-Formular zu Nun, wie funktioniert die Validierung? Validierungen funktionieren also auf sehr einfache Weise mit sehr wenig Standardcode, okay? Und Sie können bei der Definition der Felder Validierungsregeln angeben Validierungsregeln angeben Zum Beispiel befinde ich mich hier auf meinem Bildschirm auf der Seite Erste Schritte des React-Hook-Formulars, und hier drüben siehst du dieses Beispiel. Okay, das ist das erste Beispiel, das du siehst. Dies beinhaltet eine grundlegende Validierung. Du kannst sehen. Es heißt also, die Validierung mit den erforderlichen oder anderen Standard-HTML-Validierungsregeln einbeziehen . Und Sie können sehen, wie es ist , einschließlich der Validierung. Es registriert zuerst das Feld hier drüben. Okay? Und dann heißt es, erforderlich, stimmt. Okay? Nun, es registriert dieses Feld und teilt dem React-Hook-Formular mit, dass, hey, dieses Feld einen Wert benötigt. Der Benutzer kann dieses Feld also nicht umgehen oder das Formular abschicken , ohne einen Wert für dieses Feld einzugeben. Okay. Nun, wenn das Feld nicht ausgefüllt ist oder irgendein Wert hier nicht gefunden wird und wenn es einen Validierungsfehler gibt, passiert das, dass du das Fehlerobjekt bekommst, du hast Zugriff auf das Fehlerobjekt, wie du hier sehen kannst. Okay? Nun, dieses Fehlerobjekt ist Teil des Use Hook-Formulars und es ist eine leistungsstarke Funktion , mit der die Validierungsfehler für die Formularfelder verwaltet und angezeigt werden . Okay? Dieses Objekt wird also jeden Validierungsfehler verfolgen, der auftritt, wenn der Benutzer das Formular ausfüllt, okay? Und jedes Formularfeld wird seinen eigenen Eintrag im Fehlerobjekt haben , sodass Sie leicht erkennen können, in welchem Feld ein Problem vorliegt und um welches es sich handelt. Okay. Also, wie funktioniert es? Also wenn der Benutzer das Formular absendet. Also hier habe ich die Validierung als wahr registriert. Okay, ich brauche „true“, und ich habe die Fehler hier, okay? Wenn der Benutzer nun das Formular absendet, überprüft das React-to-Formular die Eingabewerte anhand der von Ihnen angegebenen Validierungsregeln. Das ist also eine Validierungsregel, die ich hier in diesem Beispiel festgelegt habe , okay? In diesem Beispiel verlangen wir nun, dass dieses Feld nicht leer ist und der Benutzer ein leeres Feld einreicht Der Validierungsfehler wird also ausgelöst und das Fehlerobjekt hier wird aktualisiert, okay? Und die Validierungsfehlermeldung wird hier hinzugefügt. Okay? Und das wird hier angezeigt. kannst du sehen? Ein Beispiel für Fehler ist also nicht erforderlich. Also, wenn das irgendeinen Wert hat, dann zeige diese Fehlermeldung an. Sie können sehen, wie es angezeigt wird. Okay? Also so kannst du hier Validierungen nutzen. Okay? Also lass mich dir hier einen Überblick geben. Okay? Jetzt werde ich zu unserer Codebasis wechseln. Okay. Und hier haben wir ein sehr einfaches Formular. Wir registrieren hier zwei Felder. Okay. Und diese beiden Felder, was sie tun, ist im Grunde Eingabefelder wie Name und E-Mail hier drüben. Okay? Also, was wir tun würden ist zuerst, ich würde herkommen. Bei der Registrierung der E-Mail, tut mir leid, nicht der E-Mail, ich werde den Namen hier registrieren. Bei der Registrierung können Sie gemäß der Syntax hier die Syntax sehen. Bei der Registrierung übergeben Sie einen weiteren Parameter mit den Validierungsregeln, oder? Also kopiere ich das einfach. Okay. Du kannst das von hier kopieren. Du kommst hierher und darin kannst du es einfügen. Okay? Also erforderlich ist hier wahr. Okay? Nun, sobald das wahr ist, brauchst du Zugriff auf das Fehlerobjekt, richtig? Sie können hier also Formularstatus, Formularstatus, cool in sagen , und Sie werden Fehler haben, ungefähr so. Okay? Also das ist etwas , das wir jetzt haben, richtig. Und jetzt können Sie das Etikett außen anbringen, okay, es können Fehler angezeigt werden. Fehler werden gelehrt, du kannst einen Namen sagen, okay. Also Name, denn was ist ein Feldname? Der Feldname ist Name. Okay? Also kannst du den Namen des Fehlerpunkts sagen und ich werde die Meldung hier drüben anzeigen. Okay? Also ich kann P sagen und ich kann sagen, dass ein Name erforderlich ist, so etwas in der Art, okay? Ich spare mir das. Ich drücke auf Aktualisieren. Okay? Wenn Sie einreichen, werden Sie sehen, dass der Name erforderlich ist, oder? Was haben wir dafür getan? Wir haben gerade eine Eigenschaft hinzugefügt wir haben gerade Zugriff auf das Fehlerobjekt erhalten, und wir zeigen die Fehlermeldung unter bestimmten Bedingungen Das ist es. Das ist es. Es ist so einfach und es macht den Standardcode aus. Es reduziert den Standardcode, okay? Sie müssen hier also nicht viel Boilerplate-Code schreiben viel Boilerplate-Code Sie müssen nur sagen, was getan werden muss und alles andere wird erledigt Okay? Nun, in diesem Beispiel, wie es bei der Registrierung funktioniert hat, sagten wir, das ist ein Feld, das wir mit dem Namen registrieren , richtig? Was also passiert ist, ist, dass die Fehler in diesem Namen hier registriert wurden, dem Feldnamen. Also der Feldname ist Name, hier ist der Feldname E-Mail. Okay. Auf dieser Grundlage werden die Fehler hier registriert, okay? Und sie werden mit Hilfe von Logical und Operate hier nur bedingt angezeigt mit Hilfe von Logical und Operate hier Okay? Also, so funktioniert das, okay? Nun, hier drüben sagen wir tatsächlich, dass es erforderlich ist. Aber was Sie tun können, ist required true hat hier eine Standardfehlermeldung, oder? Was Sie tun können, ist sagen wir Fehler, Punktname, Punktnachricht. Mal sehen, welche Botschaft wir zu sehen bekommen. Sie können also sehen, dass wir keine sehen. Okay, ich muss das tatsächlich einpacken. Also so. Okay? Also das existiert nicht, okay? Also, was wir tun können, ist hier, anstatt zu sagen: Okay, es ist kein Fehler. Es sind Fehler. Das tut mir leid. Okay. Also lass mich auffrischen. Wenn ich einreiche, okay? Es wird keine Fehlermeldung angezeigt. Okay? Jetzt können Sie hier eine benutzerdefinierte Fehlermeldung festlegen, wenn eine Registrierung erforderlich ist. Sie können also sagen, dass der Name erforderlich ist, okay? Und das kannst du speichern. Anstelle von true geben Sie die Fehlermeldung weiter. Und wenn Sie das einreichen, wird Ihnen die benutzerdefinierte Fehlermeldung angezeigt, oder? So können Sie also auch Dinge tun. Dies ist auch ein Beispiel , in dem Sie, anstatt true zu übergeben, die Fehlermeldung selbst übergeben und die Fehlermeldungen auf diese Weise anzeigen. In Ordnung. Also das ist eine Art, Dinge zu tun. Jetzt wird es neben den erforderlichen Szenarien auch Szenarien geben, in denen Sie zusätzliche Regeln oder komplexe Validierungen wünschen Wenn Sie also auf die Website von React Hook Fm kommen, hier auf der linken Seite, in der Navigation, müssen Sie den Validierungs-Tab hier auf der linken Seite, in der Navigation, anwenden Klicken Sie darauf und hier sehen Sie eine Liste aller unterstützten Validierungsregeln. Sie können die Mindestlänge und die maximale Länge sehen , all das, okay, Sie können damit umgehen. Sie können den Vornamen sehen, oder die maximale Länge ist 20. Die Mindestlänge können Sie festlegen je nachdem, wie Sie es möchten. Okay. Also hier kannst du reinkommen und hier kannst du sagen „erforderlich“, okay? Äh, du kannst sagen erforderlich, Name ist erforderlich, und ich kann Mindestlänge, Länge M sagen und ich kann zum Beispiel Mindestlänge von zwei sagen, okay? Und dann stelle ich das hier auf den booleschen Wert um Ich entferne die Nachricht und hier drüben habe ich die Nachricht als okay angezeigt, ich sage, der Name ist erforderlich und sollte mindestens zwei Zeichen lang sein Okay? Etwas wie das hier. Das spare ich mir. Und wenn Sie jetzt aktualisieren und S sagen können, können Sie sehen, dass der Name erforderlich ist und mindestens zwei Zeichen lang sein sollte. Wenn ich noch einmal S eintippe, siehst du, dass das Formular gesendet wird. Okay. Also ja, so funktionieren Validierungsregeln. Und auch ohne das, wenn Sie hier keinen Namen eingeben , werden Sie sehen, dass diese Validierung ausgelöst wird, oder? Also das funktioniert absolut gut, okay? Du kannst das auch für E-Mails machen, okay? Sie können hier sagen, dass erforderlich wahr ist. Okay. Erforderlich ist wahr, so etwas in der Art. Okay. Und, Hoppla, das müssen also Dici Prices sein So etwas, okay? Und hier kannst du sagen, anstelle von Fehlern Punktname wirst du hier drüben haben. Fehler in der E-Mail, so etwas in der Art. Okay? Also E-Mail ist erforderlich, kannst du sagen. Alles klar? E-Mail ist erforderlich, und Sie können diese löschen und speichern. Und jetzt ist auch E-Mail erforderlich. Sie können sehen, dass der Name erforderlich ist, E-Mail ist erforderlich. Okay? Sie können auch CSS-Styling hinzufügen, wenn Sie möchten, in Ordnung. Aber so wird es funktionieren. Und Sie haben zusätzliche Dinge wie den Musterabgleich. Okay, du kannst einen Musterabgleich durchführen. Sie können hier den Mustervergleich in Aktion sehen , Sie können das Muster angeben , das Sie durchführen möchten, und das könnte für E-Mails sehr hilfreich sein. Okay. Wenn Sie also hier eine E-Mail oder ein E-Mail-Muster haben, anhand dessen Sie es validieren möchten, können Sie das auch ausführen. Was wir also für E-Mails tun können, ist, dass wir diese Art von Muster haben können. Okay, also ich komme her. Okay. Ich habe hier eine E-Mail benötigt. Okay. Erforderlich, ich habe es angegeben. Ich sage Muster, etwas in der Art, ich nehme das und spezifiziere dieses Muster. Ich werde dieses Muster zusammenfügen. Das ist also ein Muster, das für die E-Mail-Validierung da ist. Okay, ich habe dieses Muster hinzugefügt. Du kannst ganz normal googeln und so ein Muster bekommen, okay, oder ich teile diesen Code mit euch allen dafür Und wenn du das speicherst, okay, lass es mich aktualisieren. Wenn ich absende, ist eine E-Mail erforderlich. Ich tippe das ein, ich tippe das ein. Dennoch ist E-Mail erforderlich. Sie können sehen, dass die E-Mail-Adresse nicht gültig ist. Also, wenn ich das eintippe, okay, E-Mail ist immer noch nicht gültig. Ich kann .com sagen, und dann sollte es wahrscheinlich funktionieren. Sie können sehen, dass die Fehlermeldung verschwunden ist. Diese E-Mail muss also gültig sein, nur dann funktioniert es. In Ordnung. Also das ist ein Javascript-Muster für die Validierung von E-Mails, und ich suche danach und ich habe es hier bekommen. Also eine Sache, die ich hier als Namen hervorheben möchte, Sie sehen diese vollständige Meldung dass Name nicht Name ist erforderlich, und sie sollte auch aus zwei Zeichen bestehen, okay? Aber hier möchte ich nur die Botschaft hervorheben , dass es aus zwei Zeichen bestehen sollte. Und wenn das leer ist, möchte ich hervorheben , dass der Name erforderlich ist. Okay. Je nachdem, welchen Fehler der Benutzer macht, möchte ich diese Fehlermeldung hervorheben. Das ist also auch möglich. Ich zeige dir , wie das gemacht werden kann. Okay. Also hier drüben, was ich tun werde, ist, ich werde das einfach hier kommentieren. Okay. Ich werde das duplizieren, okay? Weil ich den nicht löschen will. Ich möchte, dass du Zugriff darauf hast. Okay, jetzt hier drüben, ich muss mich registrieren. Okay. Jetzt im Register, ich gebe Pflichtfelder hier ein, Pflichtangaben wie dieses. Okay. Erforderlich ist wahr. Die Mindestlänge beträgt zwei. Okay? Also, ich hatte dir gesagt, dass du, statt verlangen, tun kannst, du weißt schon, du kannst die Nachricht hier drüben weitergeben, okay? Warte eine Sekunde. Ich erhalte eine Fehlermeldung. Ich weiß nicht warum. 1 Sekunde. Ups, ich habe die schließende Zahnspange hier verpasst. Ich habe das nicht kopiert. In Ordnung. Das ist absolut okay. Das passiert. Weißt du, ich mache es einfach zu. Okay. Ja. Wenn Sie also required verwenden, können Sie die Fehlermeldung angeben. Also werde ich zu dieser Methode zurückkehren. Ich sage Name. Ups. Ich sage, ein Name ist erforderlich, ungefähr so Okay? Nun, wie spezifiziert man das für die Länge? Okay? Also nehme ich das hier drüben. Ich werde diese Nachricht loswerden. Ich sage Fehler, tot, Name, Punkt, Nachricht, okay? Ich habe das jetzt. Okay? Also ist es kein Fehler, es sind Fehler. Okay. Denken Sie daran, hier den richtigen Objektnamen anzugeben. Okay. Nun, was ich tun kann, ist, dass ich ein Schlüssel-Wert-Paar hier noch einmal erwähnen kann , anstatt zwei für eine Mindestlänge hier drüben. Okay. Wie das funktionieren wird, ist, ich kann sagen, Mindestlänge. Ich werde zwei hier loswerden. Ich füge hier Curly Pass hinzu. Und ich sage Wert. Okay, es gibt eine Werteigenschaft, ich sage 20. Okay. Und ich sage hier Nachricht. Was ist die Botschaft, die du haben willst, okay? Ich möchte eine Nachricht haben, da der Name aus mindestens zwei Zeichen bestehen sollte . Ich werde diese Nachricht kopieren. Ich sage, der Name sollte aus mindestens zwei Zeichen bestehen. Erledigt. Spar dir das. Aktualisiere jetzt und tippe ein, ich sage a at ate gmail.com Ich möchte keine Fehlermeldungen für E-Mails sehen. Also a@gmail.com, wenn ich absende, wirst du sehen, dass der Name mindestens zwei Zeichen lang sein sollte, oder? Wenn ich das entferne, ist ein Name erforderlich. Der Name sollte mindestens zwei Zeichen lang sein. Wenn ich alles eintippe und abschicke, sollte er mindestens zwei Zeichen lang sein. Ups, ich habe 20 gemacht. Es tut mir leid. Ich speichere das nochmal. Wenn ich absende, werden Sie sehen, dass die Daten übermittelt werden. Wenn Sie dies jedoch reduzieren, sollten Namen mindestens zwei Zeichen lang sein. Wenn Sie dies entfernen, ist ein Name erforderlich. Sie können sehen, wie dynamisch das ist. Das ist eine andere Art, Dinge zu tun, okay. Ich zoome ein bisschen heraus, oder ich gehe einfach in den Vollbildmodus. Okay? Sie können den Namen und die Nachricht sehen. Lass mich das in die Reihe nehmen. Lassen Sie mich den Abschluss hierher bringen. Okay, Sie können sehen, wie das strukturiert ist. Also registrierst du dich hier, registrierst den Namen. Sie sagen erforderlich, Name ist erforderlich. Okay? Für erforderlich, das ist eine Nachricht, die Sie haben, okay? Für die Mindestlänge geben Sie an, dass der Wert zwei ist, aber ich möchte auch eine Nachricht haben. Sie haben das also als Objekt übergeben, das hier ein Schlüssel-Wert-Paar ist, okay, Sie können sehen, und es akzeptiert jetzt ein Objekt mit mehreren Validierungsregeln. Register hat tatsächlich den ersten Parameter als Namen des Felds, okay? Der zweite Parameter ist hier tatsächlich ein Objekt. Das ist das gesamte Objekt, ich. Also von dieser Collibrase zu dieser Collibrase. Es ist das gesamte Objekt , das als zweiter Parameter an das Register übergeben wird als zweiter Parameter an das Register übergeben Und darin gibt es auch eine Mindestlänge, bei der wir sagen, der Wert ist zwei und der Name sollte mindestens zwei Zeichen lang sein. Welche Fehlermeldung auch immer hereinkommt , sie wird hier angezeigt. Und du kannst sehen, wie dynamisch es war, okay? Das sind alles Standardregeln, Leute, oder? Mindestlänge, maximale Länge, alles, was Sie hier sehen, Mindestlänge, maximale Länge, okay, Min-Max, Muster, Sie wissen schon, validieren. Das ist also das Maximum und das Minimum, das erforderlich ist. All das ist Standard, oder? Warum sollten Sie dafür Code für Ihre gesamte Anwendung in jedem Feld in jeder Komponente schreiben Ihre gesamte Anwendung in jedem Feld in jeder Komponente Wenn Sie also eine Farm-intensive Anwendung verwenden , stellen Sie sich vor, wie umständlich das für Sie sein wird Stimmt das? Und stellen Sie sich vor, Sie verwenden React-Hook-Formulare in einer formlastigen Anwendung. Stell dir vor, das zu tun, okay? Es bietet also die gesamte Flexibilität. Sie können die Dinge auf diese Weise validieren, okay? Sie können Dinge sogar auf diese Weise validieren. Okay? Ich möchte keine Nachricht weitergeben. Ich möchte eine Standardnachricht für alle Validierungsregeln haben. Das kannst du machen. Ich habe dir gezeigt, wie du das machen kannst, oder? Das ist also das Schöne an React-Hook-Formen. Es ist wirklich eine erstaunliche Art, Formulare in React zu verwalten. Alles klar? Ich hoffe, es gefällt Ihnen und ich hoffe Sie finden all das Wissen , das Sie mit diesem Vortrag gewinnen, wertvoll, okay? Also hat React Forms Validierungsregeln wie Mindestlänge, Maximallänge eingebaut , alles, was wir hier sehen, okay? Sie können auch benutzerdefinierte gültige Funktionen für komplexe Validierungslogik verwenden. Wenn Sie zum Beispiel denken, dass Sie etwas anderes benötigen, können Sie Ihre eigenen Funktionen schreiben. Okay. Aber das ist weit darüber hinaus, oder? Sie können das Fehlermanagement über das Fehlerobjekt durchführen. Okay? Sie haben Zugriff auf das Fehlerobjekt und können mit dem Fehlerobjekt herumspielen. Performance, React to Form ist für die Leistung optimiert, insbesondere bei größeren Formularen. Ordnung. Also ich hoffe, Sie finden das nützlich und ich hoffe, das sind wertvolle Informationen für Sie alle. 7. Geschwindigkeit ist wichtig: Die Leistung von Basisformularen und React-Hook-Formular: Lassen Sie uns nun die Leistung von Normalform oder Basisform vergleichen Normalform oder Basisform , bei der keine React-Hook-Formulare verwendet werden. Ich habe also den Code für ein Basisformular hier drüben, und wir verwenden hier keine React-Hook-Formulare. Ordnung. Also eins, ich habe vergessen, diese Eingabe zu entfernen. Das ist also die Eingabe für React-Hook-Formulare. In dieser speziellen Form verwenden wir also nicht React Take Forms, wie ich schon sagte. Es ist ein sehr einfaches Formular mit E-Mail und Namen, und wir verwenden es hier bei Handle Submit und bei Change Event, Lesna, und der Wert ist quasi an diesen Status hier gebunden. Okay. Und Sie haben diesen riesigen Effekt-Hook , damit wir verfolgen können wann das Formular tatsächlich gerendert wird oder wie oft es erneut gerendert wird, richtig? Ich verwende hier also kein Abhängigkeitsarray, und weil ich das Abhängigkeitsarray nicht verwende, wird es bei jedem erneuten Rendern ausgelöst. Und ich habe das bei Handle Change, was sicherstellt , dass der Wert in den Staaten bei jeder Änderung aktualisiert wird . Und ich habe dieses Handle Submit, um das Senden zu bearbeiten. Nun zum Build hier drüben. Wenn ich aktualisiere, werden Sie sehen, dass das Grundformular zweimal gerendert wird, und das liegt natürlich am Strict-Modus. Okay? Also das ist absolut okay. Ich zoome ein bisschen hinein. Okay. Also, ich komme und tippe hier etwas ein, also sage ich, du kannst sehen, jedes Mal, wenn ich etwas eintippe, liebe ich es zu reagieren. Jedes Mal, wenn ich etwas eintippe, wird das Formular neu gerendert. Es wurde also 14-mal neu gerendert , während ich 14 Zeichen eingegeben habe Okay? Wenn ich E-Mail eintippe, wird sie sich wieder selbst rendern. Du kannst es sehen. Und es ist nicht leistungseffizient. Wenn ich das abschicke, okay, ich erhalte eine Fehlermeldung, aber lassen Sie mich das entfernen und lassen Sie mich einreichen. Sie können sehen, dass die Daten übermittelt wurden, aber nach viel Rendern. Das ist also nicht für die Leistung optimiert . Das ist nicht gut. Es wird viel gerendert , was vermieden werden kann. Okay? Nun, dasselbe Beispiel, was wir tun können, ist, dass wir React-Hook-Formen verwenden können , und React-Hook-Form kann dies auf sehr effektive und effiziente Weise mit minimalem Code verwalten . Also hier schreibst du so viel Code. Sie können fast 50 Codezeilen sehen, aber das kann mit React-Hook-Formularen minimiert werden Jetzt hier drüben habe ich dieses Beispiel in eine React-Hook-Form umgewandelt Ich verwende hier das React-Hook-Formular, Sie sehen können, und sehr wenig Code. Und hier habe ich zwei Felder, Name und E-Mail. Ich registriere diese beiden Felder und habe wieder einen Use-Effect-Hook ohne Abhängigkeitsarray, um das gerenderte Hook-Formular zu drucken. Ich habe auch eine Submit-Funktion, die hier auf diese Weise übergeben wird. Lassen Sie uns sehen, wie das Rendern hier funktioniert. Wenn ich hierher komme, können Sie sehen, wie das React-Hook-Formular zweimal gerendert wird. Das liegt natürlich am strikten Modus. Wenn ich jetzt tippe, liebe ich React. Okay. Sie können sehen, dass kein erneutes Rendern stattfindet. Okay? Sie können auch E-Mail eingeben , mail.com, und Sie können die Daten einreichen Sie können sehen, dass kein erneutes Rendern stattgefunden hat. Das ist also viel effizienter. React ok form minimiert das Rendern hier drüben. Die Komponente wird nicht erneut gerendert, und das ist der Vorteil der Verwendung von React-Hook-Formularen Nun, dieser Unterschied beim Rendern ist sehr wichtig. Wenn Sie große komplexe Formulare, komplexe Onboarding-Formulare oder komplexe Formulare in Ihrer Anwendung erstellen und Ihre Bewerbung viele Formulare enthält. Dann wäre das auf lange Sicht sehr wichtig . Wenn Sie das Basisformular verwenden, werden Sie zunächst eine Menge Standardcode haben. Es wäre schwer zu handhaben. Es wird viel neu gerendert und die Leistung ist nicht optimiert, oder? Aber mit React-Hook-Formularen können Sie weniger Code sehen. Okay, du musst weniger Code schreiben. Eine Menge Standardcode wird reduziert, und React Hook Form bietet Leistungsvorteile, und React Hook Form bietet da es unnötige Rendervorgänge reduziert und so die Handhabung von Formularen effizienter macht, da es unnötige Rendervorgänge reduziert und so die Handhabung von Formularen effizienter macht, insbesondere in Ihrem Anwendungsfall, in dem Sie eine größere Anwendung haben In Ordnung? Also ich hoffe, das war nützlich, diese Demonstration, und ich hoffe, dass Sie dadurch ein wenig Klarheit den Unterschied und die Bedeutung von Basisformen und Reaktionsformen erhalten haben. Und ich hoffe, Sie gewinnen Wissen darüber, wie wichtig Reaktionsformen sind und welchen Mehrwert sie bieten. 8. Zurücksetzen und Aktualisieren: Formularstatusmanagement: Jetzt ist es an der Zeit, dass wir über die Reset-Funktionalität sprechen und darüber , wie Sie Reset-Funktionen mithilfe von React-Hook-Formularen hinzufügen können mithilfe von React-Hook-Formularen hinzufügen Jetzt ist das Zurücksetzen eine der Funktionen, die Sie vielleicht hier anbieten möchten. Hier in diesem speziellen Formular möchten Sie vielleicht eine Reset-Taste haben. Außerdem möchten Sie nach dem Absenden der Daten möglicherweise das Formular zurücksetzen und alle Werte löschen , damit der Benutzer bei Bedarf mit einer neuen Einreichung beginnen kann. Ordnung. Also, wie würdest du das machen? Mit React Hook Form ist es also so einfach wie das Aufrufen einer Funktion. React Hook Forms bietet also diese Reset-Funktion, die Sie hier hinzufügen können, okay? Und du kannst davon Gebrauch machen. In Ordnung. Also, was ich tun werde, ist nach dem Absenden, wir protokollieren die Daten. Okay? Also habe ich dieses sehr einfache Formular, bei dem der Name und der Name das React-Formular mit dieser Validierung eingetragen sind. Sie haben hier eine E-Mail, die diese Validierungen hier durchführt, und dann haben Sie auch Fehler, die Sie anzeigen, und Sie haben eine Schaltfläche, die „Senden“ lautet Und Sie handhaben das Absenden auf diese Weise, Sie protokollieren nur die Daten Okay? Jetzt beim Absenden möchte ich auch, dass die Daten zurückgesetzt werden, denn was jetzt passiert, ist, wenn ich einreiche, wenn ich A sage und wenn ich A auf chmail.com sage, okay Okay, ich kann es sagen und ich werde ABC sagen. Damit wird das Formular hier nicht wirklich zurückgesetzt, oder? Was Sie hier also tun können, ist, dass ich das Formular zurücksetzen würde. Okay? Also, was ich tun würde, ist zuerst ein Paar Curly Pres hinzuzufügen Okay? Das ist erledigt. Und dann würde ich hier diese Reset-Funktion nennen. Ich sage Reset. Und ich sage, ich nenne es so. Okay. Und das würde das Formular nach der Einreichung zurücksetzen. Was Sie hier also tun können, ist, okay, ich kann Test sagen, und ich kann Test auf mail.com sagen Wenn ich Abschicken sage, wird der gesamte Wert gelöscht und das Formular wird zurückgesetzt Sie können sehen, dass die Übermittlung abgeschlossen ist und der Wert gelöscht Okay? Sie können zusätzlich auch eine Schaltfläche hinzufügen. Hier wird also die Schaltfläche hinzugefügt, der das Formular hier abgeschickt wird. Okay. Was Sie hier tun können ist, eine Reset-Taste zu erstellen. Sie können hier Reset sagen. Typ ist eine Schaltfläche, also wähle ich diese aus. Ich sage Button. Und du kannst sagen, beim Klicken hier drüben, beim Klicken kannst du Pfeilfunktion hinzufügen und du kannst den Reset aufrufen. Sie können also Reset sagen und Sie können es hier aufrufen. Okay, so etwas. Das ist ein Reset-Knopf. Nun, was passieren würde, ist, wenn du irgendwas eintippst, okay. Ups, tut mir leid. Also, wenn du etwas eintippst, kannst du es zurücksetzen, oder? Wenn du hier irgendwas eintippst, irgendwas hier drüben, du das gesamte Formular zurücksetzen willst, hast du diesen Reset-Teil. Okay? Also das ist ein Vorteil von Reset hier drüben. Es ist so einfach, hier einen Funktionsaufruf durchzuführen und alle Werte zu löschen. Sie können den Funktionsaufruf von Ihrer JavaScript-Funktion hier drüben, die Sie definieren, okay, mit der Submit-Funktion, oder Sie können es sogar damit tun, jetzt auf ClickList Ordnung. Also ich hoffe, das ist nützlich und ich hoffe, Sie haben einige Informationen daraus gewonnen. 9. Maßgeschneidertes Feedback: Benutzerdefinierte Validierungen in React-Formularen: Im Moment habe ich ein Formular, das React-Hook-Formulare verwendet , und ich habe ein paar Felder in dem Formular, als wäre das ein Ich habe einen Namen und ich habe auch eine E-Mail hier drüben. Okay? Nun, die Validierung , die ich hier verwende, ist ziemlich einfach. Ich benötige zum Beispiel einen Namen, und die Mindestlänge beträgt zwei. Hier sollte die E-Mail erforderlich sein, und das ist ein Muster, das ich abgleichen möchte , um herauszufinden, ob die E-Mail gültig ist oder nicht. Okay? Also das ist eine Bestätigung , die ich bereits habe, okay? Nun, diese Validierungen , die ich habe, sind übliche und standardmäßige Validierungen, oder? Wenn Sie Formulare erstellen, wird es Szenarien geben denen Sie eine Art von benutzerdefinierter Validierungslogik in Ihre Formularfelder integrieren möchten eine Art von benutzerdefinierter Validierungslogik in Ihre Formularfelder integrieren , die auf Ihre Anwendung zugeschnitten ist Okay? In diesem speziellen Fall gibt es nun eine Option namens validieren, mit der Sie solche benutzerdefinierten Prüfungen zu Ihren Formularen hinzufügen können . Lassen Sie mich Ihnen nun zum Beispiel hier ein Beispiel geben. Nehmen wir an, ich möchte, dass Benutzer mit dem Namen Edmin nur dieses Formular einreichen Nun, das ist eine benutzerdefinierte Prüfung , die spezifisch für meine Anwendung ist, und sie ist nicht üblich oder allgemein, oder? Also, wie würdest du das hier hinzufügen? Hier kommen also die Validierungsoptionen ins Spiel. Okay. Die Option validate verwendet also eine Funktion, die true zurückgibt, und gibt eine Fehlermeldung zurück wenn die Validierung fehlschlägt. Okay? Also wahr ist Return, wenn die Validierung erfolgreich ist. Ordnung. Lassen Sie uns das nun in Aktion sehen. Nehmen wir an, ich nehme in diesem speziellen Formular dasselbe Beispiel mit einem Lohn, um zu überprüfen, ob der Benutzer oder der Benutzer den Namen Edmin Nun, wie Sie die Option validieren hier nutzen können , ist, dass Sie zur Eingabe kommen, Sie sagen hier drüben und Sie können validieren, validieren als Option hier drüben sagen validieren als Option hier drüben Sie können ein Schlüssel-Wert-Paar verwenden und den Funktionsnamen hier angeben. Okay? Also, wie lautet der Funktionsname? Okay? Also können wir hier eine Funktion erstellen. Okay, ich kann hier den Namen const validieren sagen, und dieser Gain hat einen Wert als Parameter Sie können so etwas haben und dann sagen, ob es einen Wert hat Okay? Also kannst du sagen, ob der Wert gleich o admin ist. Okay, oder wenn du sagst, ob der Wert hier nicht gleich Admin ist. Okay. Ups, mein Wert ist nicht gleich Admin, dann gibst du zurück Nur Admin ist erlaubt. Nur Admin ist erlaubt, so etwas in der Art. Okay. Abhängig von Ihren Anforderungen können Sie die Art der Nachrichten senden oder Sie können die Nachrichten erstellen je nachdem, welche Anforderung Sie haben, aber ich werde das speichern, damit ich sie jetzt erstellt habe. Jetzt kommst du her und sagst gültigen Namen, so etwas in der Art. Spar dir das. Komm her und lass uns uns erfrischen. Wenn du hierher kommst und AD eingibst, tippe ich nicht Admin ein. Okay, und ich habe eine gültige G-Mail. Okay. Gültige E-Mail hier drüben. Wenn ich absende, wirst du sehen, dass nur Admin erlaubt ist. Okay. Wenn ich hier Admin sage, Admin. Ups, Admin und wenn ich Abschicken sage, siehst du, dass der Fehler behoben ist und du kannst das Formular abschicken. In Ordnung? Du kannst auch die Logik haben , zu sagen, dass Admin nicht erlaubt ist, okay? Sie müssen die Bedingung also rückgängig machen . Admin darf hier nicht rein. Okay? Und du kannst den Zustand rückgängig machen, etwa so. Wenn es Admin entspricht, dann erlaube Admin nicht. Okay? Also, wenn ich hier Admin sage, okay. Also gut. Admin ist nicht erlaubt. Du kannst sehen. Ordnung. Also so funktioniert es, richtig. Und ich hoffe, Sie haben eine Vorstellung davon, wie das funktioniert. Sie können das sogar verkürzen, sodass Sie diese separate Funktion hier nicht benötigen , um dort zu sein. Okay. Anstatt also eine separate Funktion zu schreiben, rufe ich diese Funktion nicht hier auf, okay, ich kann sagen , okay, ich kann hier drüben sagen, okay, ich kann eine Funktion hier selbst in Kurzform schreiben selbst in Kurzform Ich habe diesen Wert, okay. Ich benutze Arrow. Ich sage, wenn der Wert hier nicht dem Wert Admin entspricht, okay? Dann schreibst du in diesem Fall Admin ist nicht erlaubt. Okay, so etwas. Also das wird auf die gleiche Weise funktionieren. In Ordnung. Du kannst sehen, dass Admin nicht erlaubt ist, richtig. Das wird also wieder wahr sein. Andernfalls wird diese Nachricht zurückgegeben. Okay? Also so funktioniert das Ding hier drüben und du kannst diese Funktion loswerden, wenn du musst. Okay? Ich kommentiere das einfach aus. Wenn du herkommst, okay? Du kannst hier Admin sagen und du kannst versuchen, etwas einzureichen. Sie können sehen, dass Admin nicht erlaubt ist. Ordnung. Und ja, das funktioniert absolut gut. Alles klar? Also das funktioniert, okay? Und hier hatte ich dir ein Beispiel gegeben. Okay? Also, was hier passiert, ist, dass wir die Nachricht weitergeben, okay? Wenn die Fehlermeldung „Fehler“ nicht gefunden wurde , wird diese benutzerdefinierte Nachricht angezeigt. Okay? Was Sie tun können, ist, dass Sie in dieser einzigen Option mehrere Validierungsregeln haben können. Hier überprüfen Sie beispielsweise, ob der Benutzername gültig ist oder ob der Benutzername admin ist oder nicht, oder ob der Name gültig ist oder nicht. Entschuldigung, der Name ist nicht gültig oder nicht. Du überprüfst, ob der Name admin ist oder nicht, oder? Wenn der Name nicht admin admin lautet, Sie aufgrund dessen diese Meldung an, oder? Was du also tun kannst, ist, hier drüben mehr zu haben , okay, keinen. Okay? Also, ich kann hinzufügen, das kann eine Art Objekt hier drüben sein, das du hinzufügen könntest, okay, und so etwas in der Art. Okay. Und das hast du hier drüben. Also kann das benannt werden, okay? Du kannst sagen, nicht admin Okay. So wie es ist. Und das ist ein Scheck. Okay. Nehmen wir an, ich möchte noch einen Scheck hinzufügen, oder? Ich möchte noch einen Scheck hinzufügen, das ist keine Nummer, okay? Ich möchte also nicht, dass Benutzer eine Zahl in das Feld eingeben. Was ich also tun kann, ist, wieder Wert zu sagen. Was ist ein Scheck? Ich werde das so machen. Ich sage, ist N N, ist N hier drüben. Okay? Und ich gebe den Wert weiter. Okay. Und ich werde diese Nachricht hier drüben haben. Name kann nicht Nummer sein. Okay? Und ich werde das mit einem Komma beenden, wenn ich muss Okay? Also kannst du das mit dem Komma beenden oder es wird nicht benötigt, eigentlich ist das das letzte Jetzt möchte ich Ihnen auch sagen, dass ich hoffe, dass Sie über diese Kurzform, Dinge zu tun, im Klaren sind Also verwenden wir hier den bedingten Ausdruck, das bedingte oder, und Sie können hier sehen, ob der Wert nicht admin entspricht, okay, prüft, ob der Wert nicht admin entspricht. Okay? Und wenn die Bedingung wahr ist, der Ausdruck wahr zurück. Dieser Ausdruck würde also wahr zurückgeben. Und wenn es falsch ist, würde dies zurückgegeben werden. Okay. Also auf ähnliche Weise wird geprüft, ob das wahr ist, dann würde es zurückgegeben werden, und wenn falsch, dann würde es zurückgegeben werden. Also hier kannst du das hier testen, indem du hier Zahlen eingibst. Sie können sehen, dass der Name erforderlich ist und mindestens zwei Zeichen lang sein muss, okay? Warte eine Minute. Ich kann jetzt tatsächlich eintippen und einreichen. Okay. Es gibt mir hier einen Fehler, okay? Und lassen Sie mich überprüfen, was der Fehler ist, damit der Fehler einfach ist. Ich habe hier einen Tippfehler gemacht. Das, das letzte N ist Großbuchstaben hier drüben, so was. Ups. Tut mir leid. Das letzte N ist Großbuchstaben, so etwas in der Art, okay? Speichere das und du kommst her, um es zu aktualisieren. Okay, und tippen Sie drei, vier ein, Sie können sehen, der Name darf keine Zahl sein. Okay? Du kannst noch einen hinzufügen, okay? Du kannst noch einen hinzufügen , wenn du möchtest. Sie können so viele hinzufügen, wie Sie möchten. Okay? Das sind alles benutzerdefinierte Validierungsregeln. Wenn die Regel komplex ist und nicht hierher passt, können Sie eine separate Funktion hinzufügen, die das überprüft, etwa so, und Sie können diese Funktion hier verlinken. Okay. Also all das ist hier möglich, okay. Aber im Grunde möchte ich hervorheben, dass dies eine Möglichkeit ist , benutzerdefinierte Validierungslogik hinzuzufügen, okay? Und die Validierungsoption ermöglicht Ihnen detaillierte benutzerdefinierte Validierungen, die über einfache Prüfungen hinausgehen Und diese Funktion ist hilfreich in Szenarien, in denen Eingaben bestimmte Formate oder Bedingungen benötigen , die nicht durch generische Dinge wie die erforderliche maximale Länge abgedeckt werden , die standardmäßig in React-Hook-Formularen vorhanden Okay? Abgesehen von den Standardlogiken bieten Ihnen React-Hook-Formulare viel Flexibilität bei der Erstellung Ihrer eigenen benutzerdefinierten Logiken , und das auch auf sauberere und übersichtlichere Weise Ordnung. Ich hoffe, das ist nützlich und ich hoffe, Sie können mitmachen. 10. Über die Grundlagen hinaus: Implementierung anspruchsvoller benutzerdefinierter Validierungen: Wir werden also etwas mehr über die Validierungsoption sprechen und erfahren, wie Sie Ihrer Anwendung benutzerdefinierte Validierungen hinzufügen können , die etwas komplexer sind, oder Was wir bisher gesehen haben, ist, dass Sie mit der Validierungsoption diese Art von Validierungen tatsächlich hinzufügen können, Sie mit der Validierungsoption diese Art von Validierungen tatsächlich hinzufügen können Sie können benutzerdefinierte Validierungen haben , die auf Ihre Anwendung oder Domain zugeschnitten sind, oder? Hier prüfen wir also, ob der Benutzer Administrator ist oder nicht, und hier prüfen wir, ob der Benutzer eine Nummer in den Namen eingibt oder nicht Beide sollten nicht erlaubt sein und sie sollten entsprechend behandelt werden , je nachdem welche Bedingung Sie setzen, okay? Also haben wir diese beiden Zustandsprüfungen hier drüben. Es wird Szenarien geben, in denen Sie vielleicht weitere hinzufügen möchten. Sie können hier also mehr Dinge hinzufügen , indem Sie am Ende ein Komma hinzufügen und Sie können hier in der Validierungsoption weiterhin weitere Einträge hinzufügen hier in der Validierungsoption weiterhin weitere Einträge Nehmen wir nun an, Sie haben ein Szenario, in dem Sie eine asynchrone Validierung durchführen möchten asynchrone Validierung durchführen möchten Was bedeutet nun diese asynchrone Validierung? Asynchrone Validierung bedeutet also , dass Sie das beim Backend überprüfen möchten , oder Möglicherweise haben Sie einen Backend-Server, Sie möchten etwas im Backend überprüfen und dann dem Benutzer die Bestätigungsfehlermeldung anzeigen etwas im Backend überprüfen und dann dem Benutzer die Bestätigungsfehlermeldung anzeigen. Wie würdest du das machen? Das ist also mit Hilfe der Validierungsoption selbst möglich , wie der Validierungsoption selbst. Okay? Lassen Sie uns hier im Szenario sagen, wir haben Namen und E-Mail. Nehmen wir an, ich möchte den Namen überprüfen , sagen wir, das ist kein Name, sagen wir, das ist der Benutzername und ich möchte das mit dem Backend überprüfen und validieren, ob der Benutzername existiert oder nicht. Okay. Also, wie würde ich das machen? Okay? Also was Sie tun können, ist, dass Sie hier eine Prüf- oder eine asynchrone Funktion haben können hier eine Prüf- oder eine asynchrone Funktion Asynchrone Prüfung würde ich sagen, okay? Und damit können Sie eine asynchrone Validierung durchführen, okay? Also lass mich das machen. Okay. Also was ich tun würde, ist hier drüben, ich würde herkommen. Okay, ich würde Komma sagen, ich würde sagen, validieren, und validieren ist bereits hinzugefügt, also sage ich „Benutzername überprüfen Okay. Und hier drüben würde ich Wert sagen oder hier Wert. Okay. Und ich hätte D-Logik. Okay? Also, Logik wird hier drüben so kommen. Okay. Aber das überprüft jetzt das Backend, oder? Also müssen wir das als Sinc markieren. Okay. Lass mich dir jetzt zeigen, wie du das machen kannst. Nehmen wir an, ich habe const, okay, ich habe diesen Pollan-Wert , den ich von check if user name function hier erhalte . Okay? Prüfen Sie, ob der Benutzername einen Wert als Eingabe erhält. Was ist nun Check if Nutzername? Okay? Also lass mich hier den Check-If-Benutzernamen hinzufügen. Okay? Jetzt, hier drüben, kann ich Funktion sagen. Überprüfe, ob ich einen Namen verwende. Okay. Was ist der Parameter? Es akzeptiert? Es akzeptiert den Parameter , sodass ich im Moment keine Parameter übergeben möchte. Okay, ich lasse das mit der Pfeilfunktion definieren, also sage ich, ist gleich, okay. Und warte eine Minute. Ich habe die Syntax verarscht. Ich sage also Sync Überprüfe, ob es tut mir leid, kein Waschbecken. Ich habe die Syntax verarscht. Lass mich das löschen. Okay. Also das wird konstant sein. Überprüfe, ob du einen Namen verwendest. Okay. Und ich nenne das Exist , weil es besser klingt, zu überprüfen, ob der Benutzername existiert. Okay? Also ersetze ich das hier drüben und überprüfe, ob der Benutzername existiert. Okay. Und hier markiere ich das als asynchrone Funktion, okay? Und ich gebe den Benutzernamen so ein. Okay? Weil hier ein Wert übergeben wird, also ist das nichts als der Nutzername. Und ich habe den Scheck hier definiert, okay? Was ich jetzt hier machen kann, ist, dass ich einen simulierten Scheck an das Backend schicken kann einen simulierten Scheck an das Backend Ich kann sagen, dass Const existiert. Okay. Und hier hast du vielleicht einen EPI-Anruf, den du vielleicht machen könntest, okay? Hier haben Sie vielleicht den Code für den EPI-Anruf, und das könnte ein boolesches Ergebnis zurückgeben Oder Sie könnten ihn verarbeiten und den booleschen Wert erhalten , richtig? Also liegt es ganz bei dir. Aber was ich hier tun kann, ist, dass Sie das tatsächlich können Also ich werde hier den Backend-Check simulieren. Ich kann sagen, warte Okay, und ich kann hier drüben ein neues Versprechen sagen, okay? Und ich sage Entschlossenheit hier drüben. Okay. Also gebe ich nur ein Versprechen ab. Ich sage „Timeout festlegen und ich sage „Tausend lösen Ich mache hier eine Verzögerung von 1.000 Millisekunden Und ich sage Rückkehr. Okay, ich sage return, und Sie können hier einen booleschen Wert zurückgeben. Okay? Nun, welchen booleschen Wert können Sie zurückgeben Also was ich tun kann, ist, hier drüben eine statische Liste zu haben. Okay, ich werde also eine statische Liste vorhandener Benutzernamen haben. Okay? Das ist eine statische Liste, und es ist eine RA, ich sage Admin, ich sage Benutzer, eins, zwei, drei, und ich kann sagen, du kannst noch eine hinzufügen. Ich mache weiter, so etwas in der Art. Jetzt kannst du „Zurück“ sagen und ich kann überprüfen, ob etwas existiert. Okay? Und tut mir leid, ich kann zurückgeben, was ich zurückgeben werde, ich kann sagen, existierender Nutzername. Okay, Punkt beinhaltet, ich sage hier Benutzername. Das ist also ein Nutzername , den ich übergebe. Okay? Also, was das macht, ist, ich habe eine statische Liste von Nutzernamen Natürlich wird das in Ihrem Fall nicht der Fall sein , weil Sie hier einen Backend-API-Aufruf durchführen könnten , okay Also, ich habe eine Startliste mit Benutzernamen, okay, und ich überprüfe den Benutzernamen, also ob der Benutzername, den der Benutzer eingegeben hat , in dem vorhandenen Benutzernamen existiert Wenn es existiert, gebe ich diesen Scheckwert zurück. Das ist ein boolesches Ergebnis, das ich zurückgebe, okay? Und bevor ich diese Prüfung durchführe, simuliere ich hier eine Verzögerung von 1.000 Millisekunden simuliere ich hier eine Verzögerung von 1.000 Millisekunden. Also das ist wie ein simulierter API-Aufruf hier drüben, oder? Und da es ein Waschbecken ist, würde ich sagen, warte, weil es hier ein Versprechen einlöst. Und da das ein Warten ist, wird es zu einem Waschbecken. Stimmt? Also ich hoffe, das macht jetzt Sinn in Bezug auf das, was hier passiert, okay? Und hier drüben kann ich sagen, dass return not equal to exist ist, oder du kannst sagen, dass der Benutzername bereits vergeben ist. Okay? Also der Benutzername ist schon vergeben, ungefähr so. Ordnung. Also, du hast diese Art von Nachricht , die gesendet wird. Speichern Sie das. Okay. Lass uns sehen, wie das funktioniert. Okay? Also mache ich eine Auffrischung. Also der Benutzername, den wir haben, ist John, einer der Nutzernamen, ich kann John machen. Ich kann „Abschicken“ sagen Sie können nach einer Weile sehen, dass der Benutzername bereits vergeben ist. Ich könnte die Verzögerung auch erhöhen. Okay? Das ist möglich. Ich kann John One und E bei rate gmail.com sagen. Da dieser Benutzername also einzigartig ist, wird er funktionieren. Okay, Sie können sehen, dass es eingereicht wurde. Okay. So funktioniert die asynchrone Validierung Und das ist nicht nur eine statische Validierung, sondern wenn Sie irgendwelche Prüfungen oder Validierungen mit dem Backend durchführen möchten , können Sie das auf jeden Fall tun, können Sie das auf jeden Fall tun, Und jetzt können Sie sich vorstellen, wie mächtig das sein kann. Okay? Also, wenn Sie an einem echten Projekt arbeiten, Sie haben EPIs am Laufen, Sie müssen etwas validieren, indem Sie ein EPI aufrufen, können Sie absolut tun, oder? Sie können sogar abhängige Validierungen durchführen, okay? Also abhängige Validierungen, wie ich Ihnen sagen werde, sagen wir, Sie haben ein Passwortfeld und ein bestätigtes Passwortfeld und ein bestätigtes Passwortfeld Nun, was Sie tun möchten , ist, wenn ein Benutzer das Passwort eingibt, es mit dem anderen Passwortfeld zu überprüfen, und wenn es falsch ist, möchten Sie vielleicht eine Meldung auslösen dass das Passwort nicht übereinstimmt Vielleicht möchten Sie das tun, oder? Das könnte also ein weiterer Anwendungsfall hier sein. Also was ich tun würde, ist hier, ich habe ein Etikett. Das ist das zweite Label nach diesem Label und nach dieser Fehlermeldung hier drüben. Okay? Was ich tun kann, ist hier, ich kann ein Etikett hinzufügen. Okay, ich kann Label sagen, so etwas. Okay. Und ich kann Passwort sagen, so, und hier kann ich hier Eingabe sagen. Okay. Und die Eingabe könnte vom Typ Passwort sein. Okay, Typ ist Passwort, und hier drüben würde ich sagen, okay, hier drüben. Ich würde sagen, registriere das. Okay? Und wie würdest du das registrieren? Also würdest du das als Passwort registrieren. Also werde ich das kleine B-Passwort hier behalten. Okay. Und ich sage, das Erforderliche, es muss erforderlich sein. Okay? Ich kann all das ausfüllen, Pflichtfeld und erforderliche Validierung, aber das werde ich nicht tun. Okay? Ich werde die Dinge einfach halten. Okay? Also das ist erledigt. In Ordnung. Oder wenn du willst, hole ich mir einfach die Bestätigung von hier. Okay. Also ja, das ist die Bestätigung, die ich hier hinzufügen werde. Also ja. Das ist es. Okay. Und das schließt das Erforderliche hier drüben, registriert. Das Register ist geschlossen. Okay, das ist geschlossen, das Register ist geschlossen und dann hast du eine geschlossene lockige Klammer Okay? Und das ist es. Wir sehen hier einen Fehler . Worum geht es bei dem Fehler? Lass mich sehen. Also brauche ich diese validierte Option nicht, also werde ich sie loswerden. Okay, ich werde die Dinge einfach halten. Okay. Das ist alles was ich brauche, richtig. Das ist so ziemlich alles. Okay. Und jetzt kann ich dieses Feld duplizieren lassen . Okay. Also das ganze Feld dupliziert es, und du kannst ein Passwort hier drüben bestätigen, oder? Das ist Bestätigung. Okay. Und statt Passwort eingeben heißt das Passwort eingeben. Anstatt hier ein Passwort zu verwenden, kann ich das Passwort bestätigen lassen. Okay, so etwas. Okay. Und du hast hier eine Mindestlänge. Okay, ich werde dieses Komma loswerden. Okay, Mindestlänge Jetzt Mindestlänge nach Mindestlänge. Was Sie tun können, ist hier, Sie können eine validierte Option hinzufügen, also sagen Sie validieren. Jetzt sollte dieses Passwortfeld mit dem Bestätigungskennwort übereinstimmen, das immer mit dem Passwort übereinstimmen sollte. Sie können also Wert sagen, okay, Pfeil. Und man kann sagen, der Wert entspricht Watch und Ups. Watch ist nicht importiert, also muss ich importieren, watch, watch, ich sage, ähm, es erlaubt mir nicht zuschauen und ich sage Passwort Also das überwacht das Passwort und gibt seinen Wert zurück, okay? Und wenn das wahr ist, ist das okay. Wenn nicht, dann schickst du eine Nachricht, die besagt, dass die Passwörter nicht übereinstimmen, oder? Passwörter stimmen nicht überein, so etwas in der Art, oder? Das ist erledigt. Wir müssen reingehen. Okay, die Uhr wurde also noch nicht hinzugefügt. Andernfalls erhalten wir eine Fehlermeldung. Also habe ich das getan und du kannst herkommen. Okay. Das Formular sieht nicht so toll aus. Die Form sieht nicht so gut aus. Aber lassen Sie mich einige BR-Tags hinzufügen und dies in einem einzigen Profi zusammenführen. Also füge ich nach jedem Label das BR-Tag hinzu. Alles klar? Das sollte vorerst okay sein, wir lernen, oder? Also ja, wir haben das Formular fertig. Okay. Du kannst sehen, ob ich abschicke, du wirst sehen, dass alle Validierungen ausgelöst werden, oder? Okay. Und du kannst Test sagen. Sie können A sagen, zum Tarif gmail.com. Sie können Passwörter sehen, eins, zwei, drei, vier, okay, eins, zwei, drei, vier, fünf, sechs Okay, ich habe sechs eingegeben. Und hier drüben gebe ich einen anderen Wert ein. Okay? Und wenn ich „einreichen“ sage, okay? Lassen Sie uns sehen, was passiert. Das Absenden hat nichts ausgelöst. Okay? Das ist komisch. Ordnung. Was stimmt nicht? Lass mich sehen. Die Validierung wird also möglicherweise nicht ausgelöst, weil ich die Validierungsfehlermeldungen nicht hinzugefügt habe die Validierungsfehlermeldungen nicht hinzugefügt Okay, das hätte ich hinzufügen sollen. Also ich werde hier nach dem Etikett die Fehlermeldungen zeigen, richtig. Also hier nach dem Etikett würde ich die Bestätigungsmeldungen hinzufügen. Also Fehler, sortieren, Passwort bestätigen. Okay. Das ist ein Feldname. Okay. Ich sage Passwort bestätigen, etwa so. Okay. Und hier drüben, gleich hinter dem Etikett, füge ich die Fehlermeldungen hinzu. Sie sollten jetzt also die Fehlermeldung sehen , dass die Passwörter nicht übereinstimmen. Sie können sehen, wie es funktioniert. Also, wenn ich das auf eins, zwei, drei, vier, fünf ändere , okay. Okay. Lass mich sehen. Fünf. Okay. Habe ich eins, zwei, drei, vier, fünf, eins, zwei, drei eingegeben. Okay. Also lass es mich nochmal versuchen, eins, zwei, drei, vier, fünf. Okay, hier, eins, zwei, drei, vier, fünf. Ich reiche ein. Okay, Sie können sehen die Passwort-Fehlermeldung nicht ausgelöst wird. Okay? Also funktioniert es gut, richtig. Und so können Sie Validierungen vergleichen oder beobachten oder erstellen , die von einem anderen Feld abhängen Also hier hängt die Validierung des Passwortbestätigungsfeldes vom Passwortfeld ab, oder? nenne das also Ich nenne das also abhängige Validierungen, richtig ? Es geht also darum. Und jetzt noch eine Sache, die ich dir zeigen möchte. Was jetzt passiert, ist, dass die Validierung ausgelöst wird, wenn Sie zu diesem Zeitpunkt einreichen , richtig? Es wird Szenarien geben, in denen Sie die Validierung bei Änderung oder wenn das Ding eingegeben wird, auslösen möchten die Validierung bei Änderung oder wenn das Ding eingegeben wird, auslösen , oder? Wenn der Benutzer das Formular ausfüllt . Es sollte also in Echtzeit sein. Sie können diese Sache in Echtzeit mit einer kleinen Änderung erledigen. Du kannst also herkommen. Und wenn Sie hier ein Anwendungsformular erstellen , okay, hier in Use Form, können Sie eine CO-Prese hinzufügen, ok und hier können Sie den Modus angeben und Sie können sagen, bei Änderung bei Änderung Du kannst auf BL sehen, dass es einige Optionen gab, okay? Ziemlich viele Optionen zur Unschärfe bei Änderung beim Absenden, ich sage bei Änderung Ich werde das speichern und jetzt die Magie sehen, richtig. Also hier habe ich hinzugefügt. Sie können sehen, dass der Name erforderlich ist und mindestens zwei Zeichen lang sein muss. Sie können sehen. Okay. Geben Sie den Namen ein, okay, die Validierung ist abgeschlossen A, zum Tarif gmail.com. Okay. Passwort. Okay, eins, zwei, drei, vier, fünf. Okay, eins, zwei, drei, vier, fünf. Okay. Du kannst sehen. Sechs. Okay. So können Sie jetzt in Echtzeit sehen, wie das Formular funktioniert, und das alles wegen der einzigen Änderung. Ich habe dieses Schlüsselwertpaar hier als Objekt hinzugefügt , als ich das Formular erstellt habe, oder? Ich hoffe also, dass hier etwas Gutes über die Formularverwaltung mit dem React-Hook-Formular gelernt wurde , richtig. Ich hoffe, das war nützlich und ich hoffe, dass Sie dadurch Ihre eigenen Formulare auf sehr robuste Weise mit effizienter Leistung und vielen Funktionen erstellen sehr robuste Weise mit effizienter Leistung und können, indem Sie viel Boilerplate-Code reduzieren, oder? Das sind also React-Hook-Formulare für Sie und das sind die benutzerdefinierten Validierungen Ich hoffe das war super nützlich. 11. Schlussbemerkung zum Kurs: Und damit sind wir am Ende dieser transformativen Reise in die Welt der dieser transformativen Reise in React-Hook-Formen Wir haben uns eingehend damit befasst, wie React Hook Form React-Anwendungen grundlegend verändern kann Verwaltung von Formularen in Wir haben viele Dinge untersucht, wenn es um die Formularverwaltung in React geht Wir haben gelernt, wie Sie häufig auftretende Probleme lösen können, und wir haben die Leistungsfähigkeit von React-Hook-Formularen erkannt. Um Ihnen einen Überblick über das zu geben, was wir gelernt haben: Wir haben gelernt, wie Sie beobachten können, wie sich Werte dynamisch ändern, Validierungen implementieren und die Leistung Ihrer React-Anwendungen wie Sie beobachten können, wie sich Werte dynamisch ändern, Validierungen implementieren verbessern Welche haben natürlich Formen. Und wir haben auch Grundformen mit der React-Hook-Form verglichen , sodass Sie Grund auf verstehen, wie die React-Hook-Form das Spiel verändern kann. Ich hoffe, dieser Kurs hat Ihnen eine andere Perspektive des Formularmanagements als die Welt von React gegeben eine andere Perspektive des Formularmanagements als die Welt von React Aber denken Sie daran, dass unsere Erkundung hier nicht endet. Die Stärke von React Hook Forms liegt in ihrer Flexibilität und Fähigkeit, sich an eine Vielzahl von Aufgaben zur Formularverarbeitung anzupassen. Und ich ermutige Sie, in Ihren Projekten weiter zu experimentieren, erforschen und die Grenzen zu erforschen und die Grenzen dessen, was mit diesem Tool möglich ist Ich bin gespannt, wie Sie React-Hook-Formulare in Ihrem Projekt verwenden werden, da dies Ihren Formularverwaltungsprozess beschleunigen wird Und denken Sie daran, dass es bei Innovation und Effizienz vor allem darum geht, neue Tools und Techniken zu nutzen, und das React-Hook-Formular ist jetzt ein wichtiger Bestandteil Ihres React-Toolkits Vielen Dank, dass Sie an diesem Kurs teilgenommen haben, und danke, dass Sie eine so engagierte Lerngruppe Ich hoffe, dieser Kurs hat Sie nicht nur mit neuen Fähigkeiten ausgestattet, sondern Sie auch dazu inspiriert, den Umgang mit Formularen aus einer völlig anderen Perspektive zu betrachten Umgang mit Formularen aus einer völlig anderen Perspektive In diesem Kurs findest du im Projektbereich ein Klassenprojekt, das du fertigstellen und einreichen kannst. Viel Spaß beim Lernen und wünsche Ihnen alles Gute.