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>

但是我试图使用相同的库 multiselect 创建它。

Answer 1

这是一个使用钩子和 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 2

现在受支持：

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 3

我已经检查了react-bootstrap文档，并且似乎没有 multiselect 功能。

因此您可以使用第三方库，例如：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 />
}

Demo。

如何在react-bootstrap中使用Multi-Select Dropdown

3 个答案: