Recuperando valor de con opción múltiple en React

La forma de Reaccionar para establecer qué opción se selecciona para un cuadro de selección, es establecer un especial value apoyar en el <select> mismo, correspondiente a la value atributo en el <option> elemento que desea que sea seleccionado. Para multiple seleccione este accesorio puede aceptar una matriz en su lugar.

Ahora, debido a que este es un atributo especial, me pregunto cuál es la forma canónica de recuperar las opciones seleccionadas en la misma estructura de matriz de valores de opción cuando el usuario cambia cosas (para que pueda pasarlo a través de una devolución de llamada a un componente principal, etc.), ya que presumiblemente lo mismo value La propiedad no estará disponible en el elemento DOM.

Para usar un ejemplo, con un campo de texto harías algo como esto (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} />;
  }
});

¿Cuál es el equivalente a reemplazar? ??? para este componente de selección múltiple?

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 misma manera que lo hace en cualquier otro lugar, ya que está trabajando con el nodo DOM real como destino del evento de cambio:

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

Con Array.from() y e.target.selectedOptions puede realizar una selección múltiple controlada:

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

target.selectedOptions devuelve una HTMLCollection

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

La manera más fácil…

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

En caso de que quieras usar ref puede obtener valores seleccionados como este:

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 actualizar

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

En caso de que desee realizar un seguimiento de las opciones seleccionadas mientras se completa el formulario:

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 es una colección/lista similar a una matriz de elementos relacionados con el DOM. Obtiene acceso a él en el objeto de destino del evento al seleccionar valores de opción. Array.prototype.slicey call nos permite crear una copia del mismo para el nuevo estado. También podría acceder a los valores de esta manera usando una referencia (en caso de que no esté capturando el evento), que fue otra respuesta a la pregunta.

En realidad puedes encontrar el selectedOptions dentro del objetivo… no hay necesidad de iterar sobre todas las opciones. Imaginemos que desea enviar los valores a un onChange función pasada a su componente como accesorios: puede usar la siguiente función en el onChange de su selección múltiple.

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

Lo siguiente funcionó para mí

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