ReactJS-Komponente rendert Textarea nicht mit Statusvariable
Ich stehe vor einem faszinierenden Fehler in React.
Ich habe diese Komponente:
%Vor%Wie Sie vielleicht bemerken, ist es ein Controller-View in einem Geschäft, das für meinen AppDispatcher registriert ist.
Die obigen Schritte werden korrekt ausgeführt. Wenn die bestimmte Aktion ausgelöst wird, wird meine Komponente korrekt mit den Variablen {this.state.sCurrentBookToShow.title} und this.state.sCurrentBookToShow.title up-to-date dargestellt.
Das Problem kommt von diesem Teil:
%Vor%Die Zeichenfolge wird nicht im Textbereich gedruckt.
Ich habe versucht, dies zu debuggen:
%Vor% Die Zeichenfolge summary wurde korrekt im veränderbaren Textbereich gedruckt.
Beachten Sie, dass mein Browser sagt:
Warnung: Benutze die
defaultValueodervalueRequisiten anstelle der Einstellung Kinder auf<textarea>.
Aber ich werde das später beheben, da ich denke, dass es sich nicht auf das aktuelle Problem auswirkt.
BEARBEITEN: Ich habe Ihre Bemerkungen (soweit) berücksichtigt, also habe ich meinen Code wie folgt aktualisiert:
%Vor%- Ich habe
this.state.sCurrentBookToShow.titledurch.summaryersetzt Sicher, die Leiter ist nicht leer. - Ich füge die Zusammenfassung in eine
defaultValueprop ein
Hier ist die Ausgabe:
Zweiter Schnitt:
Ich habe eine Beispielanwendung hochgeladen, die das Problem hervorhebt. Ich hoffe, dies würde helfen, eine richtige Lösung zu finden.
3 Antworten
Überprüfen Sie diesen Link von reacts docs: Reagieren des Textarea-Werts
Grundsätzlich unterstützt text rea nicht den darin enthaltenen Text. Sie müssen dies stattdessen als value oder defaultValue angeben.
Der richtige Weg ist also
%Vor%oder
%Vor%Der Unterschied zwischen value und defaultValue liegt darin, dass defaultValue immer geändert werden kann und die Änderung von der Komponente als unkontrollierte Komponente wiedergegeben wird. Wenn Sie jedoch value verwenden, wird es zu einer kontrollierten Komponente, und Sie müssen die value -Eigenschaft aktualisieren, um sicherzustellen, dass sich die Änderung in der Komponente widerspiegelt. Um eine klare Vorstellung vom Unterschied zwischen Wert / Standardwert zu erhalten, überprüfen Sie Folgendes: Geige für Wert Standardwert Unterscheidung Die Konsole zeigt immer einen neuen Wert an aber Komponente wird nicht.
Genau das ist genau das, was falsch ist. Aus den Dokumenten :
Wenn Sie die Komponente mit einem nicht leeren Wert initialisieren möchten, können Sie eine defaultValue-Prop.
angeben
Ich hatte das gleiche Problem. Ich löste es, indem ich kontrollierte Komponente benutzte, z. B.
%Vor%Es funktioniert gut, um den Eingangsteil zu steuern. Allerdings hatte ich ein anderes Problem, ich muss den state.value zu props.value init / ändern, wann immer es ein Rendern gibt.
Ich habe die Lift-Cycle-Methode benutzt und es funktioniert perfekt.
%Vor%hoffe das hilft.
Tags und Links javascript reactjs textarea