如何在 React js 中展开下拉列表答案

【问题标题】：how can I expand dropdown in react js如何在 React js 中展开下拉列表
【发布时间】：2021-05-20 02:01:00
【问题描述】：

我在组件类中有以下代码。当我渲染它时，下拉菜单不会拍摄 menuitem 中的值。我在这里想念什么。提前致谢。

import { FormGroup, DropdownButton, MenuItem} from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

export default class abc extends React.Component{
    render() {
        return (
            <form >
                <FormGroup controlId="selection" bsSize="large">
                    <label htmlFor="lblModelSelection"><b>Select</b></label>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <DropdownButton id="lblSelection" title="--Select--">
                        <MenuItem >abc</MenuItem>
                        <MenuItem >pqr</MenuItem>
                        <MenuItem >xyz</MenuItem>
                    </DropdownButton>
                </FormGroup>
            </form>
        )
    }
}

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

当我运行您的代码时，出现错误提示 Attempted import error: 'MenuItem' is not exported from 'react-bootstrap'. MenuItem 似乎不再是 react-bootstrap 库中的组件。 react-bootstrap 的官方文档见：https://react-bootstrap.github.io/components/dropdowns/

此外，您可能希望将组件名称大写。所以你的组件不是abc，而是Abc。（更多详情请查看ReactJS component names must begin with capital letters?）

下面的代码现在对我有用。

import React from 'react';
import { Form, FormGroup, Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";

export default class Abc extends React.Component {
    render() {
        return (
            <Form>
                <FormGroup controlId="selection" bsSize="large">
                    <label htmlFor="lblModelSelection"><b>Select</b></label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                    <Dropdown>
                        <Dropdown.Toggle variant="success" id="dropdown-basic">
                            Select
                        </Dropdown.Toggle>

                        <Dropdown.Menu>
                            <Dropdown.Item>abc</Dropdown.Item>
                            <Dropdown.Item>pqr</Dropdown.Item>
                            <Dropdown.Item>xyz</Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </FormGroup>
            </Form>
        )
    }
}

【讨论】：

复制上述代码后，程序编译成功，但在控制台我得到7个错误。错误是 -
抱歉，暂时不知道。只发现此链接有类似问题。它仍然没有解决，但我认为它给出了错误的方向。 stackoverflow.com/questions/59680413/…
控制台中没有错误。您的设置可能存在兼容性问题？

【解决方案2】：

你可以像这样添加选项显示：

<Dropdown ... show={true}>

有关更多信息，请参阅文档：https://react-bootstrap.github.io/components/dropdowns/#dropdown-props

【讨论】：