最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Why doesn't my dropdown from React Bootstrap close - Stack Overflow

programmeradmin3浏览0评论

I'm trying to use a dropdown menu from React-Bootstrap and can't make it work. It doesn't close (and it's not vertical, only if I use CSS with display: flex and flex-direction: column)(I'm using 2.10.7 version) :

It's inside a div. When i click a second time on i, it turns like this:

Here is the code:

function DropdownMenu() {
    return (
        <Dropdown>
            <Dropdown.Toggle className={styles.dropdowntoggle} variant="success" id="dropdown-basic">
                Dropdown Button
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

export default DropdownMenu;

The only css used is the background color on the Dropdown.Toggle.

I have tried using the simplified version. I've tried using onToggle and onClick with a "show" state, using the show prop. Doesn't work.

I've installed React Bootstrap and Bootstrap.

Edit: styles.dropdowntoggle is for the use of CSS on this component.

autoClose prop doesn't work either.

I'm trying to use a dropdown menu from React-Bootstrap and can't make it work. It doesn't close (and it's not vertical, only if I use CSS with display: flex and flex-direction: column)(I'm using 2.10.7 version) :

It's inside a div. When i click a second time on i, it turns like this:

Here is the code:

function DropdownMenu() {
    return (
        <Dropdown>
            <Dropdown.Toggle className={styles.dropdowntoggle} variant="success" id="dropdown-basic">
                Dropdown Button
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

export default DropdownMenu;

The only css used is the background color on the Dropdown.Toggle.

I have tried using the simplified version. I've tried using onToggle and onClick with a "show" state, using the show prop. Doesn't work.

I've installed React Bootstrap and Bootstrap.

Edit: styles.dropdowntoggle is for the use of CSS on this component.

autoClose prop doesn't work either.

Share Improve this question edited Jan 20 at 23:05 Sam 2,33117 gold badges99 silver badges206 bronze badges asked Jan 20 at 12:29 david33david33 111 silver badge5 bronze badges 2
  • 2 What is styles.dropdowntoggle ? – 0stone0 Commented Jan 20 at 12:32
  • "Edit: styles.dropdowntoggle is for the use of CSS on this component.", give the value assigned to styles.dropdowntoggle – Sam Commented Jan 20 at 23:02
Add a comment  | 

1 Answer 1

Reset to default 0

Make sure to import bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

You'll need to install in if you haven't

npm install bootstrap

If I use your code (and take out className={styles.dropdowntoggle} and import bootstrap like above, it looks like


Also

className={styles.dropdowntoggle}

should be

style={styles.dropdowntoggle}

or className="..."

发布评论

评论列表(0)

  1. 暂无评论