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

这是一个更清洁，更方便的方式:)

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

你去，所有选择的选项！

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

我建议您的组件中有一个名为selectedItems

的状态

然后onChange回调从Bootstrap Multiselect docs作为参数element和checked。 Element具有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选定的值更改任何内容，这非常方便。 / p>

请注意，对于上述代码，您需要Underscore或Lodash库。这是必要的，因为React无法合并嵌套对象，因为已回答here。

Answer 4

获取值的更简单直接的方法：

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

Answer 5

您可以使用selectedOption返回这样的htmlCollection

 onchange(e){
        let selected=[];//will be selected option in select
        let selected_opt=(e.target.selectedOptions);
        console.log(selected_opt)
        for (let i = 0; i < selected_opt.length; i++){
            selected.concat(selected_opt.item(i).value)
        }

    }

和我们选择的

<select  onChange={this.onchange.bind(this)} className="selectpicker w-100 rtl" multiple >
                    {this.state.list.map(obj=><option value={obj[this.props.val]}>{obj[this.props.name]}</option>)}
                </select>

Answer 6

使用selectedOptions

清除es6代码

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

Answer 7

用TS反应16。

注意：裁判已弃用，这就是为什么我使用回调函数设置裁判。

  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"
/>

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

7 个答案: