EDIT: Dies ist ein Duplikat, siehe hier
Ich kann keine Beispiele für die Verwendung eines dynamischen Schlüsselnamens beim Festlegen des Status finden. Folgendes möchte ich tun:
inputChangeHandler : function (event) {
this.setState( { event.target.id : event.target.value } );
},
Dabei wird event.target.id als zu aktualisierender Statusschlüssel verwendet. Ist das in React nicht möglich?
Antworten:
Dank des Hinweises von @ Cory habe ich Folgendes verwendet:
Wenn Sie ES6 oder den Babel-Transpiler zum Transformieren Ihres JSX-Codes verwenden, können Sie dies auch mit berechneten Eigenschaftsnamen erreichen :
quelle
computed property names
trad
, das ist es, wonach ich gesucht habe, um Codeduplizierungen für die<Radio />
Implementierung zu vermeiden .this.setState({ [event.target.id]: event.target.value });
Wie würden Sie dann mit auf diesen Status zugreifenthis.state......
?Wenn Sie mehrere gesteuerte Eingabeelemente verarbeiten müssen, können Sie jedem Element ein Namensattribut hinzufügen und die Handlerfunktion basierend auf dem Wert von event.target.name auswählen lassen, was zu tun ist.
Beispielsweise:
quelle
this.state([event.target.name])
?Wie ich das geschafft habe ...
quelle
this.forceUpdate();
was bei der neuesten Reaktion nicht der Fall sein sollte. Mal sehen, was das Problem später ist !!Ich wollte nur hinzufügen, dass Sie auch die De-Strukturierung verwenden können, um den Code umzugestalten und ihn übersichtlicher aussehen zu lassen.
quelle
Im Einklang mit dieser
.map
Arbeit:Beachten Sie die
[]
intype
Parameter. Hoffe das hilft :)quelle
Ich hatte ein ähnliches Problem.
Ich wollte den Status festlegen, in dem der Schlüssel der 2. Ebene in einer Variablen gespeichert ist.
z.B
this.setState({permissions[perm.code]: e.target.checked})
Dies ist jedoch keine gültige Syntax.
Ich habe den folgenden Code verwendet, um dies zu erreichen:
quelle
Mit ES6 + können Sie einfach [
${variable}
]quelle
Ich suchte nach einer hübschen und einfachen Lösung und fand diese:
Hoffe das hilft
quelle
Bitte beachten Sie das Anführungszeichen.
quelle
Ihr Status mit Wörterbuch aktualisiert einige Schlüssel, ohne anderen Wert zu verlieren
Lösung ist unten
hier Wert für Schlüssel "Seite" mit Wert 5 aktualisieren
quelle
Kann eine Spread-Syntax verwenden, etwa so:
quelle