Der Add-Button hier ruft also AddGoal auf und leitet das Ziel im Grunde an die App weiter. Das ist genau das, was wir brauchen, aber
wir müssen
auch sicherstellen, dass das Modal geschlossen wird, wenn wir ein neues Ziel hinzufügen.
Denken Sie jetzt daran, dass wir am Ende die modale Sichtbarkeit innerhalb der App steuern. js-Datei, da wir dort den isAddMode-Status haben,
den wir ändern, wenn wir hier auf diese Schaltfläche klicken, beispielsweise die Schaltfläche zum Hinzufügen eines
neuen Ziels
und diesen Statuswert. isAddMode wird an die Zieleingabe weitergeleitet, wo wir ihn dann verwenden, um die Sichtbarkeit von
zu steuern das modale.
Um sicherzustellen, dass das Modal verschwindet, müssen wir einfach isAddMode innerhalb
der App erneut ändern. js-Datei, da der neue Wert dann automatisch an die Zieleingabe weitergeleitet wird.
Alles, was wir tun müssen, ist, einen Ziel-Handler hinzuzufügen, in dem wir die Kursziele festlegen. Außerdem müssen
wir isAddMode auf false setzen, da wir mit dem Hinzufügen fertig sind. Nun eine kleine Randnotiz: Die Art und Weise, wie React funktioniert,
wenn Sie zwei Zustände nacheinander festlegen, werden diese
zusammen stapeln. Die Komponente wird
nach der ersten Änderung und nach der zweiten Änderung nicht zweimal neu gerendert, sondern gilt grundsätzlich Alle Statusänderungen
werden auf einmal vorgenommen und die Komponente wird nur einmal neu gerendert, was natürlich gut ist. Andernfalls
hätten
wir dort einen unnötigen Zyklus zum erneuten Rendern, und
dies ist einfach eine nette Optimierung, die React für uns durchführt. So können wir absolut zwei verschiedene Zustände nacheinander so ändern
und damit sollte das
Modal eigentlich auch verschwinden, wenn wir dies auf false setzen. Lassen Sie es uns hier auf
iOS testen.
Wenn ich hier Learn React Native hinzufüge, klicke auf Hinzufügen, dies verschwindet
und lerne jetzt viel mehr. Dies funktioniert auch und ich kann auch
weiterhin Elemente löschen.
Um dies auf Android zu testen, starten wir es auf
Android neu, klicken Sie auf
Neues Ziel hinzufügen und lernen Sie React Native hier, klicken Sie auf Hinzufügen und dies schließt
es. Jetzt lernen wir auch hier viel mehr, so und das funktioniert auch korrekt. Jetzt zwei kleine Verbesserungen, die ich noch anwenden möchte, zum einen möchte ich die Eingabe
löschen, sobald wir fertig sind, und außerdem möchte ich eine Schaltfläche zum Abbrechen bereitstellen, damit wir
alternativ, anstatt diese hinzuzufügen, auch hier abbrechen können, um sie zu schließen das Modal ohne Hinzufügen eines Elements,
denn im Moment können wir das nicht tun.
Beginnen wir damit, unsere Eingabe hier zu
löschen, nachdem wir etwas eingegeben haben. Dafür haben wir in der Zieleingabe am Ende
das eingegebene
Ziel und müssen dieses zurücksetzen, sobald wir ein neues Ziel hinzufügen. Jetzt fügen wir natürlich ein neues Ziel hinzu, wenn wir
diesen Add-Button drücken, und am Ende lösen wir eine Funktion aus, die wir mit Hilfe der onAddGoal-Requisite erhalten.
Um auch unsere Eingabe zu löschen, können wir hier eine Funktion innerhalb der Zieleingabekomponente
hinzufügen, einen Zielhandler hinzufügen oder wie auch immer Sie es nennen möchten. Dies
ist eine Funktion, die kein Argument und muss Am Ende ist es nun diese Funktion, die ich
auslösen möchte.
Also möchte ich Add Goal Handler
auslösen, also meine eigene Funktion in dieser Komponente. Jetzt hier möchte ich Requisiten onAddGoal aufrufen, ohne
hier zu binden. Wir können es einfach so aufrufen, denn wenn diese Funktion ausgeführt wird, möchte ich
sie ausführen. Hier übergeben wir nur einen Zeiger auf diese
Funktion ohne Klammern darf keine Klammern haben, um dies nicht zu früh auszuführen, hier
brauchen wir unbedingt Klammern, da dies nur ausgeführt wird, wenn diese Funktion ausgeführt wird,
und wenn ich die Funktion in meiner
übergeordneten Komponente auslösen möchte, also in der App-Komponente hier. Und hier zu onAddGoal möchte ich natürlich mein eingegebenes Ziel
hier
weiterleiten, also möchte ich diesen Zustand weiterleiten, aber danach möchte ich es auch löschen.
Danach setze ich das eingegebene
Ziel wieder auf eine leere Zeichenfolge, wodurch der hier eingegebene Text zurückgesetzt wird.
Das ist eine Sache,
die andere ist eine Schaltfläche, mit der wir dies schließen können, und dafür können wir hier eine Schaltfläche hinzufügen, und diese Schaltfläche
könnte den Titel Abbrechen haben, da diese Schaltfläche am Ende genau
das tun sollte und für den
Abbruch Schaltfläche,
es könnte schön sein, nicht die Standardfarbe Blau zu haben, sondern diese Farbe zu ändern,
und Sie können dies tun, indem Sie hier die Farbstütze hinzufügen. Zum Beispiel
könnten wir dies hier auf Rot setzen, da Rot meiner Meinung nach eine schöne Farbe für einen Abbruch ist Taste.
Wenn wir dies speichern und hier unter iOS testen, sehen
wir die Schaltfläche Abbrechen und die
Schaltfläche Hinzufügen. Wenn ich hier React Native lerne und dies hinzufüge, wird dies hinzugefügt. Wenn ich dies erneut öffne,
wird es gelöscht und gelöscht Abbrechen macht natürlich nichts, da wir Abbrechen mit der App-Komponente verbinden müssen, in der
wir die Sichtbarkeit durch Steuern des isAddMode steuern.
Hier können wir also jetzt auch einen weiteren Funktionshandler in der App-Komponente hinzufügen, den Zieladditions-Handler abbrechen oder so etwas. Es ist ein sehr langer
Name.
Ich möchte nur klarstellen, was dies tut und wann es aufgerufen wird.
Hier haben wir also den zusätzlichen Handler für das Abbruchziel und am Ende können wir einfach isAddMode
auf false setzen, wodurch
das Modal geschlossen wird, und natürlich
tun wir nichts anderes, wir ändern unsere Kursziele nicht, weil wir abgesagt haben die Hinzufügung und
jetzt können wir dies an das
Zielelement, an die Zieleingabe, also an unsere Komponente hier weiterleiten. Dort können wir die onCancel-Requisite hinzufügen. Der Name dieser Requisite liegt natürlich
bei Ihnen, da es sich um Ihre eigene
Requisite für Ihre eigene Komponente handelt. Ich habe einen Zeiger auf den Handler zum Abbrechen der Zieladdition
an onCancel weitergeleitet, und jetzt können wir dies innerhalb der Zieleingabe tun Bei Drücken dieser Taste onCancel auslösen.
Also fügen wir hier onPress hinzu und wollen Requisiten auslösen. onCancel hier, also die
Funktion, die wir auf unserer onCancel-Requisite erhalten. Damit sollte die Schaltfläche Abbrechen funktionieren, ja
funktioniert einwandfrei.
Jetzt sollte es natürlich auch unter Android funktionieren,
aber um
es zu testen, schließen wir es wie immer, schließen
es neu und starten danach, ob das Löschen der Eingabe funktioniert. Wenn ich hier React Native eingebe oder lerne, klicke auf Hinzufügen, ja, das
ist leer und Abbrechen funktioniert auch.
In Bezug auf das Styling hier auf Android wäre es schön, einen gewissen Abstand zwischen
den Tasten zu haben oder tatsächlich auf beiden Plattformen, vielleicht haben diese Tasten nebeneinander.