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

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

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

的状态

然后 onChange 回调将 element 和 checked 作为参数，来自 Bootstrap Multiselect docs。元素具有 val() 方法，其中 returns 分配给选项的值。

因此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 or the Lodash library. This is necessary as React cannot merge nested objects, as answered here.

Answer 3

这是一个更简洁的 es6 方法:)

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

好了，所有已选择的选项！

Answer 4

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

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

Answer 5

使用 selectedOptions

清理 es6 代码

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

Answer 6

用 TS 反应 16。

注意：refs 已被弃用，这就是我使用回调函数设置 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"
/>

Answer 7

您可以使用 selectedOption return 这样的 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

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

如何在 React JS 中获取多个选择的选项值？

How to get multiple selected options value in React JS?

reactjs

react-bootstrap