как я могу расширить раскрывающийся список в реакции 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 больше не является компонентом в библиотекеact- bootstrap. См. Официальную документацию по реакции- 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>
        )
    }
}