Retrieving value from <select> with multiple option in React
The same way you do anywhere else, since you're working with the real DOM node as the target of the change event:
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);}
With Array.from() and e.target.selectedOptions you can perform a controlled select-multiple:
handleChange = (e) => { let value = Array.from(e.target.selectedOptions, option => option.value); this.setState({values: value});}target.selectedOptions return a HTMLCollection
Easiest way...
handleChange(evt) { this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); }