web-dev-qa-db-fra.com

Récupérer une valeur de <select> avec plusieurs options dans React

Le moyen de réaction pour définir l’option sélectionnée pour une zone de sélection consiste à définir un attribut value spécial sur le <select> lui-même, correspondant à l’attribut value de l’élément <option> que vous souhaitez sélectionner. Pour un multiple, sélectionnez cet attribut peut accepter un tableau à la place. ( Edit : Actuellement, la documentation semble avoir supprimé la référence à cela)

Maintenant qu’il s’agit d’un attribut spécial, je me demande quelle est la manière la plus efficace de récupérer les options sélectionnées dans la même structure de tableau-de-options-valeurs lorsque via un rappel vers un composant parent, etc.), étant donné que la même propriété value ne sera probablement pas disponible sur l’élément DOM.

Pour utiliser un exemple, avec un champ de texte, vous feriez quelque chose comme ceci (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} />;
  }
});

Quel est l'équivalent de remplacer ??? pour ce composant à sélection multiple?

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

De la même manière que vous le faites n'importe où ailleurs, puisque vous travaillez avec le nœud DOM réel comme cible de l'événement change:

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

Si vous voulez utiliser ref, vous pouvez obtenir les valeurs sélectionnées comme ceci:

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 mise à jour 

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

Si vous souhaitez suivre les options sélectionnées pendant le traitement du formulaire:

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 est une collection/liste d'éléments liés au DOM. Vous y avez accès dans l'objet cible d'événement lors de la sélection des valeurs d'option. Array.prototype.sliceet call nous permet de créer une copie de celui-ci pour le nouvel état. Vous pouvez également accéder aux valeurs de cette manière en utilisant un ref (au cas où vous ne capturez pas l'événement), ce qui était une autre réponse à la question. 

7
rambossa

Le moyen le plus simple ...

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

Ce qui suit a fonctionné pour moi

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

Avec Array.from() et e.target.selectedOptions, vous pouvez effectuer une sélection multiple contrôlée:

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

target.selectedOptions retourne une collection HTMLC

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

2
Mendes

Une autre façon de le faire:

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

Vous pouvez réellement trouver la selectedOptions dans la cible ... inutile de parcourir toutes les options. Imaginons que vous souhaitiez envoyer les valeurs à une fonction onChange passée à votre composant sous forme d'accessoires: vous pouvez utiliser la fonction suivante sur la onChange de votre sélection multiple.

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

Essaye celui-là:

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