Как получить несколько значений выбранных опций в React JS?

Question

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

Этот компонент из https://github.com/skratchdot/react-bootstrap-multiselect

Что должно быть написано внутри функции handleChange()?

Answer 1

К сожалению, react-bootstrap-multiselect, похоже, не предоставляет какой-либо API для получения выбранных в данный момент элементов, поэтому вам придется запрашивать их непосредственно из DOM. Попробуйте что-то вроде этого:

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

Если вы используете JQuery, это может быть немного упрощен, чтобы:

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

    console.log(selectedValues); 
} 

Answer 2

Я хотел бы предложить, чтобы государство в компоненте под названием selectedItems

Затем обратный вызов onChange принимает в качестве параметров element и checked, от Bootstrap Multiselect docs. Элемент имеет метод val(), который возвращает значение, присвоенное этому параметру.

Поэтому handleChange может быть реализована следующим образом

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

Таким образом, каждый раз, когда элемент щелкают, его атрибут checked сохраняется в компоненте состояния, что весьма удобно, если вам нужно изменить что-либо, основанное на выбранных значениях MultiSelect.

Обратите внимание, что для вышеуказанного кода вам необходимо либо Underscore, либо Lodash. Это необходимо, так как React не может объединить вложенные объекты, как ответ here.

Answer 3

Вот намного чище, ES6 способ сделать это :)

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

Там вы идете, все выбранные варианты!

Answer 4

Намного проще и прямой путь, чтобы получить значения:

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