it-swarm.com.de

Abrufen des Werts von <select> mit mehreren Optionen in React

Die Methode React, um festzulegen, welche Option für ein Auswahlfeld ausgewählt ist, besteht darin, ein spezielles value-Attribut für <select> selbst festzulegen, das dem value-Attribut des <option>-Elements entspricht, das Sie auswählen möchten. Bei einer multiple-Auswahl kann dieses Attribut stattdessen ein Array akzeptieren. ( Bearbeiten : Derzeit scheint die Dokumentation den Verweis darauf entfernt zu haben.)

Da es sich hierbei um ein spezielles Attribut handelt, frage ich mich, wie kanonisch die ausgewählten Optionen in derselben Array-of-Option-Values-Struktur retrieve abgerufen werden sollen, wenn der Benutzer Änderungen an den Elementen vornimmt (damit ich sie weitergeben kann) ein Rückruf an eine übergeordnete Komponente usw.), da vermutlich dieselbe value-Eigenschaft für das DOM-Element nicht 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, um ??? für diese Mehrfachauswahlkomponente zu ersetzen?

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>
    );
  }
});
47
Inkling

Auf dieselbe Weise wie an anderen Stellen, da Sie mit dem echten 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);
}
72
Jonny Buchanan

Wenn Sie ref verwenden möchten, 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;
    });

2018 ES6 Update 

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);
11
Max Podriezov

Wenn Sie die ausgewählten Optionen während des Ausfüllens des Formulars verfolgen möchten:

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. Mit Array.prototype.sliceund call können wir eine Kopie davon für den neuen Zustand erstellen. Sie können auch über einen Ref auf die Werte zugreifen (falls Sie das Ereignis nicht erfassen). Dies war eine weitere Antwort auf die Frage. 

7
rambossa

Einfachster Weg...

handleChange(evt) {
  this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); 
}
5
jamesmfriedman

Folgendes hat für mich gearbeitet

var selectBoxObj = React.findDOMNode(this.refs.selectBox)
var values = $(selectBoxObj).val()
3
mantish

Mit Array.from() und e.target.selectedOptions können Sie ein kontrolliertes Select-Multiple durchführen:

handleChange = (e) => {
  let value = Array.from(e.target.selectedOptions, option => option.value);
  this.setState({values: value});
}

target.selectedOptions gibt eine HTMLCollection zurück

https://codepen.io/papawa/pen/XExeZY

2
Mendes

Ein anderer Weg, es zu tun:

handleChange({ target }) {
    this.props.someCallback(
       Array.prototype.slice.call(target.selectedOptions).map(o => o.value)
    )
}
1
Aral Roca

Sie können die selectedOptions tatsächlich im Ziel finden ... Sie müssen nicht alle Optionen durchlaufen. Stellen Sie sich vor, Sie möchten die Werte an eine onChange -Funktion senden, die als Requisiten an Ihre Komponente übergeben wird: Sie können die folgende Funktion für die onChange Ihrer Mehrfachauswahl verwenden.

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };
0
Lanci

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>
0
Slavi Vatahov