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

Posted 2023-02-22

【中文标题】如何在鼠标悬停时打开 react-bootstrap Dropdown？

【英文标题】：How can I make react-bootstrap's Dropdown open on mouse hover?

【发布时间】：2017-08-18 01:25:59

【问题描述】：

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

目前我的代码如下。

    <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

【问题讨论】：

首先如果你需要一个组件重新渲染，你需要设置一个新的状态，或者新的道具。您可以通过将 isOpen 添加到状态来实现您的目标，然后调用 setState onMouseEnter

是的，我采用了与您建议的完全相同的代码！！感谢您的帮助！

【参考方案1】：

另一种方式

const HoverDropDown = ( children, ...rest ) => 
   const [show, setShow] = useState(false);

   return (
      <NavDropdown ...rest show=show onMouseEnter=() => setShow(true) onMouseLeave=() => setShow(false)>
         children
      </NavDropdown>
   );


<Nav>
   <HoverDropDown id="language-switcher-container" title="Menu">
      <Dropdown.Item>Item 1</Dropdown.Item>
   </HoverDropDown>         
</Nav>

【参考方案2】：

受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>
  );
;

【参考方案3】：

就这么简单:)

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

【参考方案4】：

我自己也遇到过这个问题，我发现你需要 bootstrap CSS 和 react-bootstrap 的参数。添加以下 CSS：

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

然后你需要为子元素添加参数renderMenuOnMount=true在加载时渲染：

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

【参考方案5】：

基于@Rei Dien 的回答

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

【参考方案6】：

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

在最新更新中，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，只是为了点击它。

我很想听听另一种解决方案。

【参考方案7】：

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

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

【讨论】：

这不应该是公认的答案。只需尝试将鼠标移到下拉菜单元素上 - 下拉菜单再次关闭。

@rbtbar，你在使用嵌套菜单吗？我已经在没有嵌套菜单的情况下进行了测试，它工作正常。 “反应引导”：“^0.32.4”

这在较新的版本中不起作用，直到第一次点击下拉菜单才会呈现。您需要先触发 onclick，然后才能通过 css 进行控制

【参考方案8】：

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>
    )
  

希望这能解决您的问题。

【讨论】：

再次感谢，它有效。我想我需要改变我的想法，从传统的前端转向状态控制的渲染技术。

道具open已经不存在了，它已经被重命名为show

此技术将打开页面上的所有下拉菜单。您如何将其限制为有针对性的特定下拉菜单？或者将鼠标悬停在整个页面的多个其他下拉菜单上？

对不同的下拉菜单使用不同的状态

【参考方案9】：

你可以复制这个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 不能工作，即使它需要调整

【讨论】：

感谢您的帮助，是的，我正在使用引导程序，因此这样做可能不是一个好主意，

就像我说的我不熟悉反应，但我使用引导程序。如果您在自己的 js 文件中弹出该代码并确保您有一个 .dropdown-menu 等以便它工作，那么我不明白为什么这不是一个好主意？

使用 jQuery 操作 DOM 违背了使用 React 的全部目的——一个组件库。