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

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页面

Answer 1

一个更干净的纯CSS解决方案：

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

Answer 2

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 3

您可以复制此https://codepen.io/bsngr/pen/frDqh，它使用以下 JS

$('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即使需要调整也不起作用