Warst du erfolgreich?
Machen wir es zusammen.
Lassen Sie uns hier in der Zieleingabe eine neue Komponente erstellen, indem Sie React from React
importieren. Dann benenne ich diese
Zieleingabe und ich mag diese konstante Syntax hier. Sie könnten die Eingabe des Funktionsziels verwenden, um
Ihre Funktionskomponente zu erstellen. Das wäre in Ordnung auch. Dann exportiere ich hier die Standardzieleingabe und jetzt müssen wir hier
etwas zurückgeben und dass etwas am Ende dieser Ansicht
mit der Texteingabe und der Schaltfläche ist.
Lassen Sie mich also die gesamte Ansicht erfassen und hier in Klammern zurückgeben, damit diese mehrzeilig geschrieben und gut formatiert
ist. Natürlich müssen wir jetzt erneut Inhalte aus React Native importieren, da wir einige Komponenten aus React
Native verwenden , wir verwenden die Ansichtskomponente, wir verwenden die Texteingabekomponente, wir verwenden
die Schaltflächenkomponente und ich möchte auch die Stylesheet-Komponente verwenden, um
mein Stylesheet-Objekt einzurichten.
Fügen wir dazu hier Stylesheet hinzu. Erstellen Sie ein Objekt und übergeben Sie es an dieses Stylesheet. Methode erstellen und natürlich
die Stile aus der App übernehmen. js-Datei, das wäre der Eingabecontainer und die Eingabe. Schneiden
Sie also beide so aus, dass nur der Bildschirm hier und wieder in der Zieleingabe verbleibt.
Ich füge beide hier zu meinem Stylesheet hinzu, damit dies wieder funktioniert. Was im Moment nicht funktioniert, ist, dass wir, wenn
wir auf die Schaltfläche tippen, dies hinzufügen, weil wir hier nicht den Status in der Zieleingabe haben und wenn ich auf die Schaltfläche tippe, möchte ich
tatsächlich etwas in der App tun. js.
Also müssen wir zuerst den Staat spalten. Das eingegebene Ziel sollte nicht in der App verwaltet werden. js, aber es sollte
in der Zieleingabe verwaltet werden, da dort am Ende die Texteingabe
steht, in die der Benutzer das Ziel eingibt. Fügen wir also hier den useState-Import in die Zieleingabe ein und fügen dann
hier unsere Statusverwaltungslogik mit dem eingegebenen Ziel hinzu und setzen das eingegebene Ziel, das wir von useState erhalten, das wir mit einer leeren Zeichenfolge initialisiert haben. Fügen
wir es hier zur Zieleingabe und aus der App hinzu. In js-Datei nehme ich auch den Zieleingabehandler, schneide
ihn von dort aus und füge ihn hier zur Zieleingabe hinzu, sodass
diese Funktion in einer Funktion, die wir mit onChangeText verbinden, und jetzt damit das Abrufen der Benutzereingaben
wieder funktionieren sollte.
Wenn wir nun die Taste drücken, möchte ich eine Funktion in der App auslösen. js, ich möchte den Add Goal Handler auslösen und diese Funktion sollte hier
bleiben, da ich die Liste hier verwalten muss, weil die App. Die js-Datei ist die einzige Komponente, die
Zugriff auf die Zieleingabe und die FlatList hat, in der wir die Ziele ausgeben. Wenn wir
davon sprechen, können wir dort bereits Zieleingaben in die App importieren. js von Komponenten Zieleingabe und Zieleingabe als Komponente
hier über der FlatList hinzufügen, aber jetzt müssen wir wieder herausfinden können, wann eine Schaltfläche in dieser Komponente gedrückt
wird, und in React tun Sie dies, indem Sie die
Funktion übergeben, die das Kind hat Die Komponente sollte schließlich als Requisite für die untergeordnete Komponente
ausgeführt werden.
Hier könnten wir also onAddGoal hinzufügen, dieser Name liegt ganz bei Ihnen, es ist
eine Requisite, die
Sie definieren, und dies zeigt auf Add Goal Handler.
Dies allein macht nichts, aber onAddGoal wird jetzt als Requisite innerhalb der Zieleingabe empfangen und zeigt auf eine
Funktion, was bedeutet, dass wir es dort als Funktion ausführen können.
Bei der Toreingabe kann ich dort in der Presse einfach
auf die Stütze zeigen. onAddGoal, richtig?
Da onAddGoal dieser Requisitenname ist, richte ich ihn hier in der App ein. js-Datei, die innerhalb der Zieleingabe für das
Requisitenobjekt empfangen wird, das wir in jeder Funktionskomponente erhalten, und onAddGoal zeigt auf eine Funktion, sodass
wir sie an onPress übergeben können, damit
onPress oder React Native daher wissen, dass diese Funktion aufgerufen werden soll Wenn wir
die
Taste drücken, tun Sie dies in React Native.
Trotzdem hätten wir ein Problem, da ich mich beim Hinzufügen eines Zielhandlers auf das eingegebene Ziel beziehe und das zuvor hier verwaltet wurde, aber
nicht mehr. Wir haben das eingegebene Ziel verwaltet,
bei dem es sich um die vom Benutzer im Ziel eingegebene Texteingabe handelt Eingabe jetzt und nicht in
App. js.
Der Add-Goal-Handler sollte also jetzt tatsächlich ein Argument erhalten, das der Zieltitel ist oder wie auch immer Sie ihn benennen
möchten.
Dieser Name liegt bei Ihnen und das ist es, was wir hier als Wert speichern.
Jetzt müssen wir sicherstellen, dass wir dieses Argument weiterleiten, wenn beim Hinzufügen eines Ziels in der Zieleingabe ausgeführt wird.
Das passiert hier in einer Presse und dort zeigen wir nur darauf, um auch ein Argument einzurichten,
das schließlich weitergegeben werden sollte. Wir erhalten
zwei Optionen. Option eins ist, dass wir hier eine anonyme Pfeilfunktion einrichten.
Jetzt wird diese Pfeilfunktion irgendwann ausgeführt und daher können wir hier jetzt Klammern
hinzufügen, da dies jetzt
nicht ausgeführt wird, wenn dies zuerst gerendert wird. Stattdessen wird diese Pfeilfunktion als auszuführende Funktion
für onPress und
jetzt hier in onAddGoal registriert. Wir können beispielsweise das eingegebene Ziel weiterleiten, das funktionieren würde, oder alternativ verwenden
wir diesen anonymen Pfeilfunktionsansatz nicht und können daher hier keine Klammern hinzufügen, aber
dann können wir eine andere Javascript-Funktion für Funktionen verwenden, an die wir bind aufrufen können Konfigurieren Sie einige Argumente vor,
die eventuell weitergegeben werden sollen, wenn diese Funktion ausgeführt wird.
Das erste Argument ist immer, worauf sich dieses Schlüsselwort beziehen sollte.
Dies ist für uns hier nicht wichtig, daher können wir dies einfach schreiben, aber das zweite Argument
hier oder alle anderen Argumente danach sind tatsächlich die Argumente, die von dieser Funktion empfangen werden, wenn sie aufgerufen
und per Knopfdruck aufgerufen wird.
Dies sind nun die Argumente, die an die Funktion onAddGoal weitergeleitet werden, die am Ende
nur unsere Funktion zum Hinzufügen von Zielhandlern ist. Dort benötigen wir
den Zieltitel, also
müssen wir diesen weiterleiten. Daher kann ich hier jetzt die Eingabe einrichten Ziel als weiterzuleitendes
Argument und das ist hier normale Vanille-Javascript-Syntax.
Und jetzt wird es gerendert, das sieht gut aus und
wenn ich "Learn React
Native" eingebe, wird hier immer noch eine Ausgabe ausgegeben. Damit alles funktioniert, aber jetzt teilen
wir diese App in mehrere Komponenten auf, wie Sie es normalerweise in React-Apps
und React Native-Apps tun, genau wie in React für Web-Apps, da Ihre Komponenten schlanker, fokussierter
und Ihr Code organisierter bleiben und leichter zu verstehen.