<Multiselect label='Select College' ref="collegeList" onChange={this.handleChange} multiple >
         <option value='college1'>college1</option>
         <option value='college2'>college2</option>
</Multiselect>

Este componente es de https://github.com/skratchdot/react-bootstrap-multiselect

Lo que debe escribirse en el interior de la handleChange() función ?

  • Puedes intentar hacer handleChange: function (event) { console.log(event); } y ver si se registra cualquier cosa?
  • ya he comprobado, pero no sé qué campo a buscar para obtener los elementos seleccionados.
  • En realidad desde onChange recibirá el mismo elemento que se ha pulsado, y un valor booleano, true si el elemento fue marcada, false de lo contrario. Usted encontrará a continuación mi respuesta completa.
  • Check it out npmjs.com/package/multiselect-react-dropdown
InformationsquelleAutor bunty93 | 2015-06-09

6 Comentarios

  1. 4

    Por desgracia, react-bootstrap-multiselect no parece para exponer cualquier tipo de API para obtener los elementos seleccionados actualmente, por lo que tendrá que consultar desde el DOM directamente. Intentar algo como esto:

    handleChange: function () {
        var node = React.findDOMNode(this.refs.collegeList);
        var options = [].slice.call(node.querySelectorAll('option'));
        var selected = options.filter(function (option) {
            return option.selected;
        });
        var selectedValues = selected.map(function (option) {
            return option.value;
        });
    
        console.log(selectedValues);
    }

    Si estás usando jQuery, esto puede ser simplificado un poco a:

    handleChange: function () {
        var node = $(React.findDOMNode(this.refs.collegeList));
        var selectedValues = node.children('option:selected').map(function(option) {
            return option.value;
        });
    
        console.log(selectedValues);
    }
  2. 9

    Aquí una forma mucho más limpia, es6 manera de hacerlo 🙂

    let selected = [...this.refs.select]
      .filter(option => option.selected)
      .map(option => option.value)

    Hay que ir, todas las opciones seleccionadas!

    • O en lugar de [...this.refs.select] usted podría hacer Array.from(this.refs.select)
    • o el uso de selectedOptions: dejar seleccionado = […este.refs.seleccione.selectedOptions].mapa(s => o.valor)
  3. 2

    Yo sugeriría a tener un estado en su componente llamado selectedItems

    La onChange de devolución de llamada a continuación, toma como parámetros element y checked, de la Bootstrap Multiselect docs. El elemento val() método que devuelve el valor asignado a la opción.

    Por lo tanto handleChange podría ser implementado de la siguiente manera

    handleChange: function (element, checked) {
        var newSelectItems = _.extend({}, this.state.selectItems);
        newSelectItems[element.val()] = checked;
        this.setState({selectItems: newSelectItems})
    },
    getInitialState: function () {
         return {selectItems: {}};
    }

    De esta manera, cada vez que un elemento se hace clic en su checked atributo se guarda en el estado del componente, lo cual es bastante práctico si necesita cambiar algo basado en la MultiSelect valores seleccionados.

    Por favor, tenga en cuenta que para que el código anterior es necesario el Subrayado o la Lodash de la biblioteca. Esto es necesario ya que no puede Reaccionar de combinación de objetos anidados, como respondió aquí.

  4. 1

    Una forma mucho más simple y de una manera directa para obtener los valores:

    handleChange: function () {
       var selectedValues = this.refs.collegeList.$multiselect.val();
       console.log(selectedValues);
    }
  5. 0

    limpio es6 código utilizando selectedOptions

    let selected = [...this.refs.collegeList.selectedOptions].map(o => o.value);
  6. 0

    Reaccionar 16 con TS.

    Nota: las referencias están en desuso, por eso he utilizado la función de devolución de llamada para establecer Ref.

      private selectInput: any;
      private setSelectRef = element => {
        this.selectInput = element;
      };
      private handleMultiSelectChange = () => {
        const selected = [...this.selectInput.refs.MultiselectInternal.selectRef].filter(option => option.selected)
          .map(option => option.value);
         //there you can update your state using this.setState()
      };

    <Multiselect data={data}
       onChange={this.handleMultiSelectChange}
       multiple={true}
       ref={this.setSelectRef}
       buttonClass="btn btn-default"
    />

Dejar respuesta

Please enter your comment!
Please enter your name here