如何在React JS中获得多个选定的选项值？

<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 如何在React JS中获得多个选定的选项值？

应该采取什么handleChange（）函数里面写？

来源

2015-06-09 bunty93

你可以尝试做'handleChange：函数（事件）{执行console.log（事件）; ''看看它是否记录任何东西？ – gcedo

亚我已经检查过它，但不知道要查找哪个字段以获取选定的元素。 – bunty93

实际上来自'onChange'你会收到被单击的元素本身以及一个布尔值，如果元素被选中则返回true，否则返回false。你会在下面找到我的完整答案。 – gcedo

不幸的是，react-bootstrap-multiselect似乎没有公开任何类型的API来获取当前选定的项目，因此您必须直接从DOM中查询它们。尝试是这样的：如果你正在使用jQuery

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

，这可以简化位：

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

    console.log(selectedValues); 
}

来源

2015-06-09 21:13:37 peterjmag

我建议在你调用的组件的状态selectedItems

回拨的onChange然后从Bootstrap Multiselect docs作为参数element和checked。元素有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。

来源

2015-06-09 21:26:50 gcedo

这里有一个更清洁，ES6办法做到这一点:)

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

你去那里，所有的选择的选项！

来源

2016-10-05 15:20:13 zackify

或者''... this.refs.select]'你可以做'Array.from（this.refs.select）'' – Idefixx

一个更加简单和直接的方式获得的值：

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

来源

2018-01-05 08:52:22 Vivek

如何在React JS中获得多个选定的选项值？

回答

相关问题