In einer React-Komponente für ein <select>
Menü muss das selected
Attribut für die Option festgelegt werden, die den Anwendungsstatus widerspiegelt.
In render()
dem optionState
von dem Zustand Eigentümer an die SortMenu Komponente übergeben. Die Optionswerte werden props
ab JSON übergeben.
render: function() {
var options = [],
optionState = this.props.optionState;
this.props.options.forEach(function(option) {
var selected = (optionState === option.value) ? ' selected' : '';
options.push(
<option value={option.value}{selected}>{option.label}</option>
);
});
// pass {options} to the select menu jsx
Dies löst jedoch einen Syntaxfehler bei der JSX-Kompilierung aus.
Dadurch wird der Syntaxfehler beseitigt, das Problem wird jedoch offensichtlich nicht gelöst:
var selected = (optionState === option.value) ? 'selected' : 'false';
<option value={option.value} selected={selected}>{option.label}</option>
Ich habe es auch versucht:
var selected = (optionState === option.value) ? true : false;
<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>
Gibt es eine empfohlene Lösung?
javascript
reactjs
Cantera
quelle
quelle
Antworten:
React versteht automatisch Boolesche Werte für diesen Zweck, sodass Sie einfach schreiben können (Hinweis: nicht empfohlen)
und es wird 'ausgewählt' entsprechend ausgegeben.
React macht dies jedoch noch einfacher für Sie. Anstatt
selected
jede Option zu definieren, können (und sollten) Sie einfachvalue={optionsState}
auf das Auswahl-Tag selbst schreiben :Weitere Informationen finden Sie im Dokument React select tag .
quelle
onChange={this.handleSelect}
und den Statuswert für Ihre Komponente festlegen, z. B.: 'handleSelect: function () {this.setState ({value: event.target.value});} `Dies würde Ihre ausgewählte Komponente mit new neu rendern Ausgewähltes Objekt. Hoffe es würde dir helfen.value
Requisite auf a<select>
ein Array sein, wenn Siemultiselect
aktiviert haben.defaultValue
zu initialisierenSie können das tun, was React Sie warnt, wenn Sie versuchen, die "ausgewählte" Eigenschaft von
<option>
:So können Sie
options.value
auf derdefaultValue
Ihrer Auswahl verwendenquelle
Hier ist eine vollständige Lösung, die die beste Antwort und die Kommentare darunter enthält (was jemandem helfen könnte, der Schwierigkeiten hat, alles zusammenzusetzen):
UPDATE FOR ES6 (2019) - Verwenden von Pfeilfunktionen und Objektzerstörung
in der Hauptkomponente:
enthaltene Komponente (die jetzt eine zustandslose Funktion ist):
VORHERIGE ANTWORT (mit bind):
in der Hauptkomponente:
enthaltene Komponente (die jetzt eine zustandslose Funktion ist):
Die Hauptkomponente behält den ausgewählten Wert für Obst bei (im Status), die enthaltene Komponente zeigt das Auswahlelement an und Aktualisierungen werden an die Hauptkomponente zurückgegeben, um ihren Status zu aktualisieren (die dann zur eingeschlossenen Komponente zurückkehrt, um den ausgewählten Wert zu ändern).
Beachten Sie die Verwendung einer Namensstütze, mit der Sie unabhängig von ihrem Typ eine einzelne handleChange-Methode für andere Felder im selben Formular deklarieren können.
quelle
this.handleChange.bind(this);
sein solltethis.handleChange = this.handleChange.bind(this)
;Hier ist das neueste Beispiel dafür. Aus Reaktionsdokumenten sowie der automatisch bindenden Syntax der "Fettpfeil" -Methode.
quelle
Fügen Sie einfach als erste Option Ihres ausgewählten Tags hinzu:
Dies wird zur Standardeinstellung und wenn Sie eine gültige Option auswählen, wird dies auf Ihren Status abgestimmt
quelle
quelle
Ich hatte ein Problem mit
<select>
Tags, die nicht korrekt aktualisiert wurden,<option>
wenn sich der Status ändert. Mein Problem schien zu sein, dass, wenn Sie zweimal schnell hintereinander rendern, das erste Mal ohne Vorauswahl,<option>
aber das zweite Mal mit einem, das<select>
Tag beim zweiten Rendern nicht aktualisiert wird, sondern zuerst auf der Standardeinstellung bleibt.Ich habe eine Lösung dafür mit refs gefunden . Sie müssen einen Verweis auf Ihren
<select>
Tag-Knoten (der möglicherweise in einer Komponente verschachtelt ist) abrufen und dann dievalue
Eigenschaft imcomponentDidUpdate
Hook manuell aktualisieren .quelle
Eine ähnliche Antwort für MULTISELECT / optgroups veröffentlichen:
quelle
Ich habe eine einfache Lösung, die dem HTML-Grundprinzip folgt.
.text-hide
ist eine Bootstrap-Klasse. Wenn Sie kein Bootstrap verwenden, sind Sie hier:quelle
Ich habe ein ähnliches Problem umgangen, indem ich defaultProps festgelegt habe:
<select value="this.props.propName" ...
Jetzt vermeide ich Fehler beim Kompilieren, wenn meine Requisite erst nach dem Mounten vorhanden ist.
quelle
value
einem Formularfeld ohneonChange
Handler eine Requisite bereitgestellt . Dadurch wird ein schreibgeschütztes Feld gerendert. Wenn das Feld veränderlich sein soll, verwenden SiedefaultValue
. Andernfalls stellen Sie entwederonChange
oder einreadOnly
.