如何在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

我建议在组件中设置一个名为selectedItem的状态。

然后，onChange回调从Bootstrap MultiSelect文档中获取参数元素和检查。元素具有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所选值更改任何内容，这非常方便。

请注意，对于上述代码，您需要下划线或Lodash库。这是必要的，因为React不能合并嵌套对象，正如这里所回答的。

Answer 2

不幸的是，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 3

这里有一个更干净的es6方法：）

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

好了，所有选择的选项！