1 
<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() 函数中应该写什么？

4

7 回答 7

9

这是一种更清洁的 es6 方法：)

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

你去，所有选定的选项！

于 2016-10-05T15:20:13.063 回答
4

不幸的是，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);
}
于 2015-06-09T21:13:37.650 回答
2

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

然后onChange，回调作为参数element，并且checked来自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 无法合并嵌套对象，如此处所回答。

于 2015-06-09T21:26:50.013 回答
1

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

handleChange: function () {
   var selectedValues = this.refs.collegeList.$multiselect.val();
   console.log(selectedValues);
}
于 2018-01-05T08:52:22.810 回答
1

你可以使用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>
于 2020-02-29T14:34:34.027 回答
0

用 TS 反应 16。

注意：不推荐使用 ref，这就是我使用回调函数设置 Ref 的原因。

  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"
/>
于 2019-10-30T15:59:25.980 回答
0

使用清理 es6 代码selectedOptions

let selected = [...this.refs.collegeList.selectedOptions].map(o => o.value);
于 2018-04-02T22:03:33.810 回答