reactjs - Bootstrap-select 多选呈现错误

Question

我有的：

<div className="col-md-2">
    <label>Status</label>
    <select className="selectpicker" multiple title="Choose one of the following...">
        <option>OK</option>
        <option>PENDING</option>
        <option>NEW</option>
    </select>
</div>

问题：

值（OK、PENDING、NEW）分别显示在另一个滚动字段中。而下拉选择字段在其旁边显示为单独的字段。下拉选择字段里面没有值。附上截图。

我想要的是这种下拉列表：（取自Bootstrap-select 文档）

我项目的技术栈：

• 引导选择 1.13.1
• 。网
• 引导程序 3.x
• 反应式

这可能是兼容性问题吗？

编辑

我已经放弃了。我不得不选择使用 bootstrap-multiselect 。它不那么令人困惑。推荐它！

标签： reactjsbootstrap-selectbootstrap-selectpicker

Answer 1

请检查一下：我使用了https://jedwatson.github.io/react-select/并且效果很好。

import React from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default class SelectComponent extends React.Component {
  state = {
    selectedOption: '',
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Selected: ${selectedOption.label}`);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        name="form-field-name"
        value={selectedOption}
        onChange={this.handleChange}
        multi
        options={[
          { value: 'one', label: 'One' },
          { value: 'two', label: 'Two' },
        ]}
      />
    );
  }
}