React-Bootstrap 下拉菜单没有扩展 [英] React-Bootstrap dropdown not expanding

问题描述

我刚刚开始在我的网站中实现 React-Bootstrap，但 NavDropdown 组件在点击时不会展开.

我做了什么:npm install -s react-bootstrap

添加 css 到 html:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

创建我的 Navigation 组件:

从'react'导入React；从 'prop-types' 导入 PropTypes；从 'react-bootstrap/lib/NavbarHeader' 导入 NavbarHeader；从'react-bootstrap/lib/NavItem'导入NavItem；从react-bootstrap/lib/Nav"导入导航；从react-bootstrap/lib/Navbar"导入导航栏；从'react-bootstrap/lib/NavbarCollapse'导入NavbarCollapse；从react-bootstrap/lib/NavbarBrand"导入 NavbarBrand；从react-bootstrap/lib/NavbarToggle"导入 NavbarToggle；从'react-bootstrap/lib/NavDropdown'导入NavDropdown；从 'react-bootstrap/lib/MenuItem' 导入 MenuItem；导出类 Header 扩展 React.PureComponent {使成为() {返回 (<Navbar inverse collapseOnSelect><导航栏标题><NavbarBrand><a href="#">React-Bootstrap</a></NavbarBrand><NavbarToggle/></NavbarHeader><NavbarCollapse><导航><NavItem eventKey={1} href="#">Link</NavItem><NavItem eventKey={2} href="#">Link</NavItem><NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"><MenuItem eventKey={3.1}>Action</MenuItem><MenuItem eventKey={3.2}>另一个动作</MenuItem><MenuItem eventKey={3.3}>这里还有别的东西</MenuItem><菜单项分隔符/><MenuItem eventKey={3.3}>单独的链接</MenuItem></NavDropdown></导航><Nav pullRight><NavItem eventKey={1} href="#">Link Right</NavItem><NavItem eventKey={2} href="#">Link Right</NavItem></导航></NavbarCollapse></导航栏>);}}导出默认标题；

下拉菜单不会展开:

问题在于，相同的事件会立即在 RootCloseWrapper 中处理，并触发 rootClose 立即关闭菜单.

检查它是否有效

如果您点击其他链接，然后使用 Tab 键聚焦下拉菜单项，您可以使用空格键或向下箭头键展开菜单.

I've just started implementing React-Bootstrap in my site, but the NavDropdown component will not expand when clicking on it.

What I did: npm install -s react-bootstrap

Added css to html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Created my Navigation component:

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader>
    <NavbarCollapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
        </NavbarCollapse>
      </Navbar>
    );
  }
}

export default Header;

The dropdown will not expand: Gyazo Screenshare - Dropdown not expanding A click is being registered when inspecting the elements: Gyazo Screenshare - rerendering in dom

Any ideas on how and why this error occurs?

Edit: I am currently running on React 16

EDIT 2: Here's the Github repo.
https://github.com/Hespen/PWA-bootstrap npm install && npm run development -> localhost:1337

解决方案

This is most probably a bug in react-bootstrap. The menu is actually showing and hiding instantly. If you check the code for NavDropdown.js you will see it contains <Dropdown.Menu /> as a container which uses <RootCloseWrapper /> for handling the closing of the menu. If you put a break point in the render() method of the DropdownMenu.js you will see that the first time this <RootCloseWrapper> is rendered as disabled as it should be. When you click the dropdown menu item the <RootCloseWrapper> is rendered as enabled and adds event listeners for click event to close the menu.

The problem is that the same event is then immediately processed in the RootCloseWrapper and the rootClose is triggered which closes the menu right away.

To check that it works

If you click on some other link and then use Tab key to focus the dropdown menu item you can expand the menu with the space bar or down arrow key.

这篇关于React-Bootstrap 下拉菜单没有扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！