Ich habe folgende Struktur:
FormEditor
- enthält mehrere FieldEditor
FieldEditor
- bearbeitet ein Feld des Formulars und speichert verschiedene Werte darüber in seinem Status
Wenn in FormEditor auf eine Schaltfläche geklickt wird, möchte ich in der Lage sein, Informationen zu den Feldern aller FieldEditor
Komponenten zu sammeln , Informationen, die sich in ihrem Status befinden, und alles in FormEditor zu haben.
Ich habe überlegt, die Informationen zu den Feldern außerhalb des FieldEditor
Status zu speichern und sie FormEditor
stattdessen in den Status zu versetzen . Dies würde jedoch erfordern, dass FormEditor
jede ihrer FieldEditor
Komponenten abgehört wird, wenn sie ihre Informationen ändern und in ihrem Zustand speichern.
Kann ich nicht stattdessen einfach auf den Kinderstaat zugreifen? Ist es ideal
quelle
FieldEditor
s nicht separat verwenden,FormEditor
klingt es gut , den Status in zu speichern . In diesem Fall werden IhreFieldEditor
Instanzen basierend auf derprops
Übergabe durch ihren Formulareditor und nicht anhand ihres Formulars gerendertstate
. Eine komplexere, aber flexiblere Möglichkeit wäre, einen Serializer zu erstellen, der alleFormEditor
untergeordneten Container durchläuft, alle Instanzen unter ihnen findet und sie in ein JSON-Objekt serialisiert. Das JSON-Objekt kann optional verschachtelt werden (mehr als eine Ebene), basierend auf den Verschachtelungsebenen der Instanzen im Formulareditor.Antworten:
Wenn Sie bereits einen onChange-Handler für die einzelnen FieldEditors haben, verstehe ich nicht, warum Sie den Status nicht einfach in die FormEditor-Komponente verschieben und von dort aus einen Rückruf an die FieldEditors weiterleiten konnten, die den übergeordneten Status aktualisieren. Das scheint mir eine reaktionsfreudigere Art zu sein.
Etwas in dieser Richtung vielleicht:
Original - Pre-Hooks-Version:
Code-Snippet anzeigen
quelle
myAPI.SaveStuff(this.state);
. Wenn Sie etwas näher darauf eingehen, kann ich Ihnen vielleicht eine bessere Antwort geben :)Bevor ich näher darauf eingehe, wie Sie auf den Status einer untergeordneten Komponente zugreifen können, lesen Sie bitte die Antwort von Markus-ipse bezüglich einer besseren Lösung für dieses spezielle Szenario.
Wenn Sie tatsächlich auf den Status der untergeordneten Elemente einer Komponente zugreifen möchten, können Sie
ref
jedem untergeordneten Element eine Eigenschaft zuweisen . Es gibt jetzt zwei Möglichkeiten, Referenzen zu implementieren: VerwendenReact.createRef()
und Rückrufen von Refs.Verwenden von
React.createRef()
Dies ist derzeit die empfohlene Methode zur Verwendung von Referenzen ab React 16.3 ( weitere Informationen finden Sie in den Dokumenten ). Wenn Sie eine frühere Version verwenden, finden Sie unten Informationen zu Rückrufreferenzen.
Sie müssen im Konstruktor Ihrer übergeordneten Komponente eine neue Referenz erstellen und diese dann über das
ref
Attribut einem untergeordneten Element zuweisen .Um auf diese Art von Referenz zuzugreifen, müssen Sie Folgendes verwenden:
Dadurch wird eine Instanz der bereitgestellten Komponente zurückgegeben, sodass Sie
currentFieldEditor1.state
auf den Status zugreifen können.Nur eine kurze Anmerkung, um zu sagen, dass, wenn Sie diese Referenzen auf einem DOM-Knoten anstelle einer Komponente (z. B.
<div ref={this.divRef} />
) verwendenthis.divRef.current
, das zugrunde liegende DOM-Element anstelle einer Komponenteninstanz zurückgegeben wird.Rückruf Refs
Diese Eigenschaft übernimmt eine Rückruffunktion, der ein Verweis auf die angehängte Komponente übergeben wird. Dieser Rückruf wird unmittelbar nach dem Ein- oder Aushängen der Komponente ausgeführt.
Beispielsweise:
In diesen Beispielen wird die Referenz in der übergeordneten Komponente gespeichert. Um diese Komponente in Ihrem Code aufzurufen, können Sie Folgendes verwenden:
und dann verwenden
this.fieldEditor1.state
, um den Zustand zu erhalten.Beachten Sie, dass Ihre untergeordnete Komponente gerendert wurde, bevor Sie versuchen, darauf zuzugreifen ^ _ ^
Wenn Sie diese Referenzen wie oben auf einem DOM-Knoten anstelle einer Komponente (z. B.
<div ref={(divRef) => {this.myDiv = divRef;}} />
) verwenden,this.divRef
wird das zugrunde liegende DOM-Element anstelle einer Komponenteninstanz zurückgegeben.Weitere Informationen
Wenn Sie mehr über die Ref-Eigenschaft von React erfahren möchten, besuchen Sie diese Seite von Facebook.
Stellen Sie sicher , dass Sie den Abschnitt " Refs nicht überbeanspruchen " lesen, in dem steht, dass Sie die des Kindes nicht verwenden sollten,
state
um "Dinge geschehen zu lassen".Hoffe das hilft ^ _ ^
Bearbeiten:
React.createRef()
Methode zum Erstellen von Refs hinzugefügt . ES5-Code entfernt.quelle
this.refs.yourComponentNameHere
. Ich habe es nützlich gefunden, um den Status über Funktionen zu ändern. Beispiel:this.refs.textInputField.clearInput();
props
und unpraktisch wärestate
. Sie sollten jedoch nicht Ihre bevorzugte Abstraktion für den Datenfluss durch Ihre Anwendung sein. Verwenden Sie standardmäßig den reaktiven Datenfluss und speichern Sieref
s für Anwendungsfälle, die von Natur aus nicht reaktiv sind.connected
Komponente ist?Es ist 2020 und viele von Ihnen werden hierher kommen, um nach einer ähnlichen Lösung zu suchen, aber mit Hooks (sie sind großartig!) Und mit den neuesten Ansätzen in Bezug auf Code-Sauberkeit und Syntax.
Wie in früheren Antworten angegeben, besteht der beste Ansatz für diese Art von Problem darin, den Zustand außerhalb der untergeordneten Komponente zu halten
fieldEditor
. Sie können dies auf verschiedene Arten tun.Am "komplexesten" ist der globale Kontext (Status), auf den sowohl Eltern als auch Kinder zugreifen und den sie ändern können. Es ist eine großartige Lösung, wenn Komponenten sehr tief in der Baumhierarchie verankert sind und es daher kostspielig ist, Requisiten in jeder Ebene zu senden.
In diesem Fall denke ich, dass es sich nicht lohnt, und ein einfacherer Ansatz bringt uns die gewünschten Ergebnisse, wenn wir nur die Mächtigen verwenden
React.useState()
.Vorgehensweise mit dem Hook React.useState (), viel einfacher als mit Klassenkomponenten
Wie gesagt, wir werden uns mit Änderungen befassen und die Daten unserer untergeordneten Komponente
fieldEditor
in unserem übergeordneten Element speichernfieldForm
. Dazu senden wir einen Verweis auf die Funktion, die die Änderungen behandelt und auf denfieldForm
Status anwendet. Sie können dies tun mit:Beachten Sie, dass
React.useState({})
ein Array zurückgegeben wird, wobei Position 0 der beim Aufruf angegebene Wert ist (in diesem Fall leeres Objekt) und Position 1 die Referenz auf die Funktion ist, die den Wert ändert.Mit der untergeordneten Komponente müssen
FieldEditor
Sie nicht einmal eine Funktion mit einer return-Anweisung erstellen, eine Lean-Konstante mit einer Pfeilfunktion reicht aus!Aaaaund wir sind fertig, nichts weiter, mit nur diesen beiden Schleimfunktionskomponenten haben wir unser Endziel, auf unseren Kinderwert "zuzugreifen"
FieldEditor
und ihn in unseren Eltern zu zeigen.Sie können die akzeptierte Antwort von vor 5 Jahren überprüfen und sehen, wie Hooks den React-Code schlanker gemacht haben (um einiges!).
Ich hoffe, meine Antwort hilft Ihnen dabei, mehr über Hooks zu lernen und zu verstehen. Wenn Sie hier ein funktionierendes Beispiel überprüfen möchten, ist dies der Fall .
quelle
Jetzt können Sie auf den InputField-Status zugreifen, der das untergeordnete Element von FormEditor ist.
Grundsätzlich erhalten wir bei jeder Änderung des Status des Eingabefelds (untergeordnet) den Wert vom Ereignisobjekt und übergeben diesen Wert an das übergeordnete Element, in dem der Status im übergeordneten Element festgelegt ist.
Beim Klicken auf die Schaltfläche wird nur der Status der Eingabefelder gedruckt.
Der entscheidende Punkt hierbei ist, dass wir die Requisiten verwenden, um die ID / den Wert des Eingabefelds abzurufen und auch die Funktionen aufzurufen, die als Attribute für das Eingabefeld festgelegt sind, während wir die wiederverwendbaren untergeordneten Eingabefelder generieren.
quelle
Versuchen Sie, wie in den vorherigen Antworten angegeben, den Status in eine oberste Komponente zu verschieben und den Status durch Rückrufe zu ändern, die an die untergeordneten Komponenten übergeben werden.
Für den Fall , dass Sie für den Zugriff auf ein Kind Zustand wirklich brauchen , die als funktionale Komponente (Haken) deklariert werden Sie erklären kann ref in der übergeordneten Komponente, es dann als Pass ref Attribut für das Kind , aber Sie müssen verwenden React.forwardRef und dann den Hook useImperativeHandle , um eine Funktion zu deklarieren, die Sie in der übergeordneten Komponente aufrufen können.
Schauen Sie sich das folgende Beispiel an:
Dann sollten Sie in der Lage sein, myState in der übergeordneten Komponente abzurufen, indem Sie Folgendes aufrufen:
myRef.current.getMyState();
quelle