如何在 react js 中扩展下拉列表

Question

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

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

Answer 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 组件名称必须以大写字母开头？ ）

以下代码现在对我有用。

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

Answer 2

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

<Dropdown ... show={true}>

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