0
Ich bin ein Neuling, um JS zu reaktivieren und eine einfache Anwendung mit Steuerelementen zu erstellen, um ein Objekt links unten nach rechts zu verschieben. Ich plane, 2 Komponenten <Object /> und <Controls /> (bestehend aus 4 Tasten) mit Event-Handlern zu position state der <Object /> Komponente zu aktualisieren. Aber ich begegne 2 problemen:React JS: Entwerfen einer App mit Steuerelementen zum Verschieben eines Objekts
- Wo zu speichern die
position state? Wie ich es verstehe, erlaubt die Flussarchitektur der Komponente<Controls />nicht, den Komponentenstatus<Object />zu aktualisieren. - Wie schreibe ich einen einzelnen Event-Handler für 4 ähnliche Schaltflächen (oben, unten, links, rechts)? Es ist in Ordnung, 4 separate Funktionen zu schreiben, aber ist es möglich, nur eine zu verwenden?
Können Sie den richtigen Weg empfehlen, um die obigen 2 Fragen zu behandeln?
Vielen Dank!
mockup: control buttons to move objects
Vielen Dank Filipe, das ist ausgezeichnet. Kann ich fragen, ob ich mehrere Komponenten brauche, um den jeweils anderen Zustand zu aktualisieren, das Muster besteht immer darin, den "Zustand" bei der Elternkomponente zu speichern und sie über "Requisiten" an die Kinder weiterzuleiten? – quynhu
In Bezug auf die Frage 2, ist es üblich mit react js, dass der Event-Handler identifizieren, welche Taste geklickt wird, zum Beispiel mit 'event.target',' refs' oder 'key'? Oder gibt es eine andere Möglichkeit, ID-Parameter zu Event-Handler-Funktionen? – quynhu
Wenn Sie sich Redux anschauen, wird der Status direkt im Programm gespeichert. also ja, dass der aktuelle Status quo wie man die Daten organisiert. Über Ihre zweite Frage können Sie Ereignisse wie diese identifizieren, aber aus meiner Erfahrung ist es einfacher, Funktionen zu testen und wiederzuverwenden, wenn sie nicht vom Ereignisobjekt abhängen und stattdessen normale Argumente erhalten. –