如何在 react-bootstrap 中使用多选下拉菜单

Question

我正在使用react-bootstrap库。这个库有一个名为DropdownButton的模块。所以我能够在下拉列表中显示数据。这是单选数据。

  <DropdownButton
            bsStyle="success"
            title={this.state.addLeadStageSelectTitle}
            key={"addleadstageDropDown"}
            id={"addleadstageIDAdd"}
            onSelect={this.handleSelectLeadStageAdd}
            >
                {this.state.vtx_sales_lead_status.map(objs => {
                   return (
                     <MenuItem eventKey={objs.id}>{objs.name}</MenuItem>
                  )

                }
                  )}
          </DropdownButton> 

但我正在尝试使用相同的库创建它多选。

Answer 1

现在支持：

import { Form } from 'react-bootstrap';

// [...]

<Form>
  <Form.Control as="select" multiple value={options} onChange={onSelectedOptionsChange}>
    {options.map(options => (
      <option key={option.name} value={option.value}>
        {option.name}
      </option>
    ))}
  </Form.Control>
</Form>

Answer 2

这是一个使用 hooks 和 react-bootstrap 的多选示例。

import React, { useState } from "react";
import { Col, Form } from "react-bootstrap";

export default function App() {
  const [field, setField] = useState([]);

  return (
    <Form.Group as={Col} controlId="my_multiselect_field">
      <Form.Label>My multiselect</Form.Label>
      <Form.Control as="select" multiple value={field} onChange={e => setField([].slice.call(e.target.selectedOptions).map(item => item.value))}>
        <option value="field1">Field 1</option>
        <option value="field2">Field 2</option>
        <option value="field3">Field 3</option>
      </Form.Control>
    </Form.Group>
  );
}

Answer 3

我检查了react-bootstrap文档，看起来没有多选功能。

所以你可以使用第三方库，比如：react-bootstrap-multiselect。

它是一个用于 React（带有 Bootstrap）的 Multiselect 组件。这是一个围绕现有 jQuery / Bootstrap 库的 React 包装器：bootstrap-multiselect

基本用法：

import Multiselect from 'react-bootstrap-multiselect'

const data = [{ value:'One', selected:true }, { value: 'Two' }, { value:'Three' }]

const App = props => {
  return <Multiselect onChange={props.handleChange} data={data} multiple />
}

演示。