Question

好的问题很简单。当鼠标悬停而不是单击时，我需要打开下拉列表。

目前我的代码如下。

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

正如你所看到的，我试过onMouseEnter但没有效果。有人可以解决这个问题吗？我应该传递什么属性来实现这个目标。

API页面位于react-bootstrap API page

Answer 1

export class Nav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { isOpen: false }
  }

  handleOpen = () => {
    this.setState({ isOpen: true })
  }

  handleClose = () => {
     this.setState({ isOpen: false })
  }

  render() {
    return (
       <Nav>
        <NavDropdown
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          open={ this.state.isOpen }
          noCaret
          id="language-switcher-container"
        >
          <MenuItem>Only one Item</MenuItem>
        </NavDropdown>
      </Nav>
    )
  }
}

希望这能解决您的问题。

Answer 2

这里更简洁的纯CSS解决方案：

.dropdown:hover .dropdown-menu { display: block; }

Answer 3

我自己刚刚遇到这个问题，我发现您既需要引导CSS，又需要react-bootstrap的参数。添加以下CSS：

.dropdown:hover>.dropdown-menu {
  display: block;
}

然后，您需要为子元素添加参数renderMenuOnMount={true}以便在加载时呈现：

<NavDropdown renderMenuOnMount={true}>
  <NavDropdown.Item href="#">Item #1</NavDropdown.Item>
</NavDropdown>

Answer 4

就这么简单：）

<NavDropdown onMouseEnter={(e) => document.getElementById("idofthiselement").click()} onMouseLeave={(e) => document.getElementById("idofthiselement").click()} title="Others" id="idofthiselement">

Answer 5

这似乎是一个棘手的解决方案，但这是更新后保持我的应用运行的最简单方法。

对于最新的更新，dropdown-menu直到单击按钮后才会呈现。

我一直在CSS中使用它：

.dropdown:hover .dropdown-menu {
    display: block;
}

并将其添加到我的组件中

  componentDidMount() {
    // TODO: Fix so menu renders automatically w/out click
    const hiddenNavToggle = document.getElementById('navbar__hamburger_wrapper-hidden_click')
    hiddenNavToggle.click()
    hiddenNavToggle.click()
  }

我添加了一个具有给定id的包装div，只是为了点击它。

我想听听其他解决方案。

Answer 6

基于@Rei Dien的答案

   onMouseEnter = { this.handleOpen.bind(this) }
   onMouseLeave = { this.handleClose.bind(this) }

Answer 7

受到 Rei Dien's answer 的启发，您可以通过以下方式使用 React Hooks 做到这一点。

export const Menu = () => {
  const [menuOpen, toggleMenuOpen] = useState(false);

  return (
    <Dropdown
      onMouseEnter={() => {
        toggleMenuOpen(true);
      }}
      onMouseLeave={() => {
        toggleMenuOpen(false);
      }}
      show={menuOpen}
    >
      <Dropdown.Toggle>
        Menu
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#">Menu!!!</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

Answer 8

另一种方式

set()

Answer 9

您可以复制使用以下JS

的https://codepen.io/bsngr/pen/frDqh

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

或者你可以安装一个像https://github.com/CWSpear/bootstrap-hover-dropdown

这样的插件编辑：引导程序非常精细的解决方案，但我注意到你现在说它的反应而我以前没用过但我不明白为什么上面的js即使需要调整也不会工作

如何在鼠标悬停时打开react-bootstrap的Dropdown？

9 个答案: