如何在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中獲得多個選定的選項值？

回答

相關問題