Die Reaktionsmethode zum Festlegen, welche Option für ein Auswahlfeld ausgewählt wird, besteht darin, eine spezielle value
Requisite für sich <select>
selbst festzulegen, die dem value
Attribut für das <option>
Element entspricht, das Sie auswählen möchten. Für eine multiple
Auswahl kann diese Requisite stattdessen ein Array akzeptieren.
Nun , da dies ein spezielles Attribut ist, ich frage mich , was der kanonische Weg ist , um Abrufen der ausgewählten Optionen im gleichen Array-of-Option-Werte-Struktur , wenn der Benutzer der Dinge ändert (so dass ich es durch einen Rückruf an einen passieren kann übergeordnete Komponente usw.), da vermutlich nicht dieselbe value
Eigenschaft für das DOM-Element verfügbar ist.
Um ein Beispiel zu verwenden, würden Sie mit einem Textfeld Folgendes tun (JSX):
var TextComponent = React.createClass({
handleChange: function(e) {
var newText = e.target.value;
this.props.someCallbackFromParent(newText);
},
render: function() {
return <input type="text" value={this.props.someText} onChange={this.handleChange} />;
}
});
Was ist das Äquivalent ???
für diese Mehrfachauswahlkomponente?
var MultiSelectComponent = React.createClass({
handleChange: function(e) {
var newArrayOfSelectedOptionValues = ???;
this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
},
render: function() {
return (
<select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}>
<option value={1}>First option</option>
<option value={2}>Second option</option>
<option value={3}>Third option</option>
</select>
);
}
});
quelle
select
s in einem Array kombiniert ? Sagen Sie, nachdem Sie sie alle über ergriffen habendocument.querySelectorAll('select')
?selectedOptions
keine gute Kompatibilität aufwies und vom IE immer noch nicht unterstützt wird. Dies wäre jedoch der moderne Weg, dies zu tun.Genauso wie anderswo, da Sie mit dem realen DOM-Knoten als Ziel des Änderungsereignisses arbeiten:
handleChange: function(e) { var options = e.target.options; var value = []; for (var i = 0, l = options.length; i < l; i++) { if (options[i].selected) { value.push(options[i].value); } } this.props.someCallback(value); }
quelle
(option.value for option in e.target.options when option.selected)
[...e.target.options].filter(({selected}) => selected).map(({value}) => value)
event.target.options
ist einHTMLOptionsCollection
, kein Array.HTMLOptionsCollection
ist nicht iterierbar. Funktioniert jedochArray.from
immer noch damit:Array.from(event.target.options).filter(o => o.selected).map(o => o.value)
Einfachster Weg...
handleChange(evt) { this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); }
quelle
HTMLCollectionOf<HTMLOptionElement>
kein Array ... AnscheinendArray.from
funktioniert es aber. stackoverflow.com/a/49684109/29182Wenn Sie verwenden möchten,
ref
können Sie ausgewählte Werte wie folgt erhalten:var select = React.findDOMNode(this.refs.selectRef); var values = [].filter.call(select.options, function (o) { return o.selected; }).map(function (o) { return o.value; });
ES6- Update 2018
let select = this.refs.selectRef; let values = [].filter.call(select.options, o => o.selected).map(o => o.value);
quelle
selectedOptions
dies in IEIn dem Fall, dass Sie die ausgewählten Optionen verfolgen möchten, während das Formular ausgefüllt wird:
handleChange(e) { // assuming you initialized the default state to hold selected values this.setState({ selected:[].slice.call(e.target.selectedOptions).map(o => { return o.value; }); }); }
selectedOptions
ist eine Array-ähnliche Sammlung / Liste von Elementen, die sich auf das DOM beziehen. Sie erhalten im Ereigniszielobjekt Zugriff darauf, wenn Sie Optionswerte auswählen.Array.prototype.slice
undcall
ermöglicht es uns, eine Kopie davon für den neuen Zustand zu erstellen. Sie können auf diese Weise auch mit einem Verweis auf die Werte zugreifen (falls Sie das Ereignis nicht erfassen). Dies war eine weitere Antwort auf die Frage.quelle
selectedOptions
scheint die Browserunterstützung für ziemlich lückenhaft zu sein. Aber es wäre wahrscheinlich die ideale Lösung, wenn die Unterstützung da wäre.Sie können das
selectedOptions
Innere des Ziels tatsächlich finden ... Sie müssen nicht alle Optionen durchlaufen. Stellen Sie sich vor, Sie möchten die WerteonChange
als Requisiten an eine an Ihre Komponente übergebene Funktion senden : Sie können die folgende Funktion für dieonChange
Mehrfachauswahl verwenden.onSelectChange = (e) => { const values = [...e.target.selectedOptions].map(opt => opt.value); this.props.onChange(values); };
quelle
selectedOptions
hatte keine gute Kompatibilität. Es wird von Internet Explorer immer noch nicht unterstützt und ist daher nicht wirklich verwendbar, wenn Sie IE-Unterstützung wünschen (zumindest ohne Polyfill).Folgendes hat bei mir funktioniert
var selectBoxObj = React.findDOMNode(this.refs.selectBox) var values = $(selectBoxObj).val()
quelle
Ein anderer Weg, es zu tun:
handleChange({ target }) { this.props.someCallback( Array.prototype.slice.call(target.selectedOptions).map(o => o.value) ) }
quelle
Probier diese:
dropdownChanged = (event) => { let obj = JSON.parse(event.target.value); this.setState( { key: obj.key, selectedName: obj.name, type: obj.type }); } <select onChange={this.dropdownChanged} > <option value={JSON.stringify({ name: 'name', key: 'key', type: "ALL" })} >All Projetcs and Spaces</option></select>
quelle