Es wurde viel geredet, viel getan, jetzt ist es wirklich an der
Zeit, dass diese Schaltfläche funktioniert und wir hier ein Ziel hinzufügen, richtig, und dafür
müssen wir natürlich
herausfinden, was der Benutzer eingegeben hat, und danach Hören Sie sich ein Tippen auf die Schaltfläche
an und fügen Sie das eingegebene Ziel zu einer Reihe von Zielen hinzu, die wir irgendwo verwalten müssen. Diese können wir
dann in dieser unteren Ansicht dort unten ausgeben.
Richtig,
das müssen wir tun. In diesem Kurs
werde ich Funktionskomponenten nur mit der relativ neuen Funktion "React Hooks" verwenden. Falls Sie React
Hooks noch nicht kennen, lernen Sie sie auf jeden Fall zuerst kennen, z. B. in
meinem
React Complete Guide, den ich ausführlich behandele Im Anhang finden Sie auch einige
andere Ressourcen, mit denen Sie mit React-Hooks beginnen können, da wir React-Hooks benötigen, um beispielsweise Benutzereingaben zu erhalten.
Wir haben den useState-Hook für das verwendet, was wir aus React importieren, nicht aus React
Native, sondern aus
React. Es ist eine Kernfunktion von React. Hier in dieser Funktionskomponente, in dieser App-Komponente, können wir das eingegebene Ziel und
auch das Set erhalten Zielfunktion eingegeben, um den Status mit Hilfe von useState zu aktualisieren. Standardmäßig haben wir einen Anfangsstatus,
der eine leere Zeichenfolge ist, da der Benutzer zu Beginn nichts eingegeben hat.
Jetzt können wir dies an
die Texteingabe binden. Wenn der Benutzer ein Zeichen eingibt, möchten wir unseren Status aktualisieren und den eingegebenen
Text in dem Status speichern, auf den wir dann über das eingegebene Ziel zugreifen
können, und das eingegebene Ziel übergeben zurück in die Texteingabe. Das ist diese bidirektionale Bindung, eine sogenannte kontrollierte Komponente, die Sie
auch aus React for Web mit normalen HTML-Eingabeelementen kennen.
Hier können wir also onChangeText anhören, eine Requisite, die durch Texteingabe bereitgestellt wird und eine Funktion übernimmt,
die bei jedem Tastendruck ausgeführt wird.
Jetzt könnten wir hier eine Inline-Funktion bereitstellen, aber wir können auch eine separate Funktion einrichten, um
ein bisschen saubereren Code zu haben, und Sie können eine Funktion in einer Funktion haben, und wir
müssen sie hier haben, damit wir unseren Status oder verwenden können Stellen Sie hier die eingegebene Zielfunktion ein, indem Sie hier einfach eine neue Funktion hinzufügen. Der
Zieleingabehandler kann ein Name sein. Der Name liegt jedoch bei Ihnen. In dieser Funktion erhalten wir den eingegebenen Text
automatisch, der hier von React oder React Native übergeben wird. Anschließend können wir das eingegebene Ziel festlegen und den
eingegebenen Text als Wert übergeben, da der hier eingegebene Text bereits a ist Zeichenfolge, weil wir den
Zieleingabehandler mit onChangeText verbinden, indem wir hier einfach darauf zeigen. Nun, das ist wichtig, fügen Sie dort unten keine Klammern
hinzu, da dies diese Funktion ausführen würde, wenn dieser Code analysiert wird, also wenn die
Benutzeroberfläche zum ersten Mal gerendert wird. Sie möchten dies jedoch nicht sofort ausführen,
Sie möchten es bei jedem Tastendruck ausführen und daher nehmen Sie einfach den Namen der Funktion, Sie
übergeben diesen Namen der Funktion an onChangeText und das sagt React Native effektiv, hey das ist das Funktion,
die ich für jeden Tastendruck ausführen sollte, also füge hier keine Klammern hinzu, damit dies bei jedem Tastendruck ausgeführt werden kann.
Anstelle dieser Funktionssyntax können Sie übrigens auch eine andere Syntax verwenden, die ich im
Verlauf des Kurses verwenden werde. Dabei erstellen Sie hier eine Konstante mit diesem Namen, und
dann ist der Wert dieser Konstante nach dem Gleichheitszeichen einfach a Funktion mit dieser Pfeilfunktionssyntax. Dies ist also hier
Ihre Argumentliste und dies ist der Funktionskörper. Das ist normale Javascript-Syntax, sie wird vom Javascript-Code
unterstützt, den React Native ausführen kann, und daher ist dies die Syntax, die ich
verwenden werde. Sie verbinden sie genauso wie zuvor mit onChangeText. Okay, jetzt haben wir diese Funktion verbunden. Wir aktualisieren
unseren Status mit dem, was der Benutzer bei jedem Tastendruck eingegeben
hat. Jetzt müssen wir diesen Text auch wieder an die Texteingabe übergeben, damit er dort korrekt angezeigt wird, indem
wir einfach die value-Eigenschaft an binden eingegebenes Ziel, also zu unserem Zustand, der sich mit jedem Tastendruck ändert.
Und damit erhalten wir Zugriff auf die Benutzereingaben, da diese jetzt immer
in einem eingegebenen Ziel gespeichert werden. Wenn der Benutzer die Taste drückt, möchten wir das
eingegebene Ziel verwenden. Dazu füge ich hier eine weitere Funktion hinzu, füge einen Zielhandler hinzu und das ist nur eine Namenskonvention,
die ich hier für diese Funktionen verwende. Sie können sie beliebig benennen Was auch immer Sie
von Ihren React-Apps gewohnt sind, am Ende sollte der Funktionsname einfach beschreiben, was passieren wird, und dass hier ein Druck
auf diese Schaltfläche ausgeführt wird, der am Ende ein Ziel hinzufügt. Hier nimmt die Funktion keine Argumente an, aber im Funktionskörper möchte
ich mein eingegebenes Ziel zu einer Liste von Zielen hinzufügen, und wir haben noch keine Liste.
Daher mache ich hier vorerst das Konsolenprotokoll, das in React unterstützt wird Natives, eingegebenes Ziel, damit wir zumindest sehen, dass dieses
korrekt gespeichert wurde und diese Funktion ausgeführt wird. Damit dies ausgeführt werden kann, müssen
wir es mit der Schaltfläche verbinden. Dort können wir die onPress-Requisite hinzufügen und auf den
Add Goal-Handler zeigen, ebenfalls ohne Klammern, damit dies nicht sofort ausgeführt wird, sondern nur, wenn ein Druck erfolgt.
Und jetzt speichern wir all das und gehen wir zurück und lassen Sie uns vielleicht lernen, React Native zu lernen. Das Gute ist, dass Sie hier Ihre
echte Tastatur verwenden und auf Hinzufügen klicken können. Sie sollten hier in Ihrem Terminal dieses Protokoll sehen. Sie werden es auch sehen
Übrigens in Ihren Expo-Entwicklertools hier auf der Registerkarte Browser. Wenn Sie dort auf eines der angeschlossenen
Geräte klicken, auf das Sie in meinem Fall nur auf die
Schaltfläche klicken, das Android-Gerät, sehen Sie dort unten auch Learn React Native.
Und natürlich funktioniert es auch unter iOS. Erfahren Sie alles über React Native. Wenn Sie dies hier eingeben und auf
Hinzufügen klicken, wird dies auch hier protokolliert und in den Expo-Entwicklungstools angezeigt, wenn Sie auf das iPhone klicken Ganz
unten sehen wir dieses Protokoll. Okay, wir bekommen die
Benutzereingaben, wir speichern sie, wir protokollieren sie auf der Konsole, natürlich wollen
wir sie nicht auf der Konsole protokollieren, wir wollen sie stattdessen hier unterhalb unserer Eingabe ausgeben,
wir wollen eine Liste unserer Ziele unterhalb dieses Eingabebereichs. Dafür benötigen wir hier die zweite Ansicht, die unsere Liste der Elemente ausgeben soll.
Hier zwischen dem öffnenden und dem schließenden Tag möchte ich alle Elemente ausgeben, die wir hinzugefügt
haben, alle Ziele, die wir hinzugefügt haben. Dazu müssen wir zuerst unsere Ziele verwalten
und können einen anderen Status für das einrichten, was anfangs ein leeres Array ist. Daher übergebe
ich ein leeres Array als Wert an useState und dort haben wir unsere Kursziele und festgelegte Kursziele Funktion.
Jetzt liegen diese Namen immer bei Ihnen, aber sie sollten beschreiben, was sich in Ihrem Status befindet und wie
Sie ihn aktualisieren können.
Wenn wir jetzt hier ein Ziel hinzufügen, möchte ich meine Kursziele aktualisieren, um das neue
Ziel hinzuzufügen. Dazu kann ich festgelegte Kursziele aufrufen und jetzt Kursziele in einem neuen Array festlegen, in dem ich meine alten Kursziele nehme und ein hinzufüge
ein neues.
Dies ist die Syntax, die Sie vielleicht nicht kennen. Dies ist
der sogenannte Spread-Operator. Es handelt sich um eine Javascript-Funktion, die ein vorhandenes Array verwendet, und Kursziele sind ein
Array. Es ist unser aktueller Status-Snapshot vor dem Update und zieht alle Elemente daraus heraus Array und fügt sie dann hier zu einem neuen Array
hinzu, weshalb ich die umgebenden eckigen Klammern habe. Ohne diese umgebenden eckigen Klammern würde dies nicht funktionieren,
aber
jetzt erstellen wir ein neues Array und fügen alle Elemente des alten Arrays hinzu und jetzt können wir Fügen
Sie auch ein neues Element hinzu.
Also füge ich hier ein Komma hinzu,
um ein zusätzliches Element nach all den Elementen hinzuzufügen, die ich hier herausziehe, und das Element, das ich hier hinzufüge, ist natürlich mein eingegebenes Ziel.
Jetzt aktualisieren wir unsere Liste der Ziele mit der alten Liste der
Ziele, zunächst eine leere Liste, aber diese wird mit der Zeit wachsen, da wir dann auch
ein neues Ziel hinzufügen, wenn wir diese Taste drücken. Nun eine kleine Randnotiz: Wenn Sie mit festgelegten Kurszielen
arbeiten, sind die Kursziele hier unser vorheriger Status und die Art
und Weise, wie React den Status aktualisiert. Dies sollte immer Ihr aktuellster Status-Schnappschuss sein, aber es ist nicht 100%
garantiert, diese 100% Garantie zu haben Wenn Sie Ihren Status basierend auf
dem alten Status aktualisieren, können Sie die Funktionsform dieser festgelegten Funktion verwenden, bei der Sie den Wert
Ihres
neuen Status hier nicht übergeben, sondern ihn in einer Funktion übergeben, normalerweise einer anonymen Funktion, in der Sie sich
befinden Holen Sie sich Ihren aktuellen Status oder Ihre aktuellen Ziele, also Ihren aktuellen Status-Snapshot, und geben Sie dann
Ihren aktualisierten Wert zurück. Hier gebe ich mein aktualisiertes Array mit dieser Inline-Pfeilfunktionssyntax zurück. Wenn Sie nur einen Ausdruck haben, können
Sie die geschweiften Klammern und die return-Anweisung und geben Sie einfach den Wert ein, den
Sie zurückgeben möchten, und es
wird zurückgegeben, und das ist alles normales Javascript hier, nichts React Native-spezifisch.
Hier nehme ich dann meine aktuellen Ziele und füge dann mein eingegebenes Ziel hinzu. Diese Syntax ist etwas besser, die andere
Syntax hätte auch funktioniert, aber dies funktioniert garantiert immer, da
React Native hier immer die Garantie gibt, den neuesten Status-Snapshot, bevor dann Ihre Statusänderung hier
angewendet wird.
Nun, das ist alles schön, wir haben jetzt eine Liste, eine Reihe von Zielen, die hier verwaltet werden. Wie können wir das jetzt aber ausgeben?