Récupérer la valeur de <select> avec l'option multiple dans React

Le mode React pour définir quelle option est sélectionnée pour une boîte de sélection, est de définir un attribut de value spéciale sur le <select> lui-même, correspondant à l'attribut de value sur l'élément <option> vous souhaitez sélectionner. Pour une sélection multiple cet attribut peut accepter un tableau à la place. ( Edition : Actuellement, la documentation semble avoir supprimé la référence à ceci)

Maintenant, parce que c'est un attribut spécial, je me demande quel est le moyen canonique de récupérer les options sélectionnées dans la même structure array-of-option-values lorsque l'utilisateur change les choses (donc je peux le transmettre par un rappel à un Composant parent, etc.), car vraisemblablement la propriété de la même value ne sera 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> ); } });

De la même façon que vous faites ailleurs, vous travaillez avec le noeud DOM réel comme cible de l'événement de modification:

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

Dans le cas où vous souhaitez utiliser le ref vous pouvez obtenir des 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; });

Les suivants ont fonctionné pour moi

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

Dans le cas où vous souhaitez suivre les options sélectionnées pendant que le formulaire est terminé:

 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 en accédez à l'objet objet cible lors de la sélection des valeurs d'option. Array.prototype.slice et call nous permet de créer une copie de celui-ci pour le nouvel état. Vous pouvez également accéder aux valeurs de cette façon en utilisant un ref (au cas où vous ne capturez pas l'événement), ce qui était une autre réponse pour la question.

Une autre façon de le faire:

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